Understanding how to align elements is important for creating custom layouts on your site.
Aligning elements is not difficult, but the process varies depending on whether they are block or inline elements. There’s a few differences between these element types, but the major one is how they affect the flow of the document.
In the simplest terms, block elements break the flow whereas inline elements go with the flow. That means block elements start on a new line and take up the full width of the viewport. Inline elements, on the other hand, do not start on a new line or take up the full width of the viewport. Of course the width and style of these elements can change if specified by CSS, but this is their default.
Here’s an example to help visualize these differences. Below you’ll see a Bootstrap button styled as an inline element and a block element. You can view the code by clicking on the source link.
These different types of elements require different methods for aligning them. While the methods for centering a div element, for example, can be used for all block elements, they cannot be applied to images. That’s because images are inline elements.
Below we’ll walk through the process for centering an image (or any inline element) in HTML. This process will work whether you’re building from scratch or using a framework like Bootstrap CSS. Let’s get started.
How to Center an Image in HTML
Before we discuss the different ways to center an image, it’s important to clarify what “in HTML” actually means.
Once upon a time, there was a center element. This was a block-level element that would automatically center any block or inline elements it contained. So centering an image would require HTML as simple as this:
However, this element was deprecated in HTML4. Now that HTML5 is the standard, this obsolete tag will likely not render in any modern browsers.
So what is the process? The most important thing to understand is that centering an image today will require HTML and CSS. You can’t just use HTML, or just CSS for that matter. But where you put these coding languages can vary.
It’s recommended to keep your HTML separate from your CSS by placing your HTML in the body section of an HTML doc and the CSS in the head section or an external stylesheet. If you can’t separate them for some reason — maybe the website building platform you’re using keeps them together in the source code editor, for example, — then you’ll have to use inline CSS.
Inline CSS is embedded in the HTML in the body section. The CSS is defined within the style attribute of the element being targeted. The syntax is similar to that of internal and external CSS: the CSS property is named and given a property value but with inline CSS, this rule set is enclosed by apostrophes rather than brackets.
Here’s an example. Let’s say you want to change the text color of the first header on your page to red and leave the other headers as is. Then you’d set the color property to the hex color code for red (#FF0000), place it within the style attribute, and place the whole thing inside the h2 tag. Check it out below.
Let’s say you wanted to use that same CSS but place it in the head section or an external stylesheet. You’d replace the style attribute in your HTML with a CSS selector. In the example below, an ID selector is used.
Here’s the HTML:
<h2 id="first-heading">Internal CSS Example</h2>
<p>In this example, the internal CSS is used to style the above heading and no other headings on the page.</p>
<p>Notice the heading above is not styled.</p>
<p>Nor is this heading above.</p>
Here’s the internal CSS:
Note: This is also how the CSS would look in an external stylesheet.
The result on the front end is the same, as shown below:
Now that we understand the different ways you can write CSS, the phrase “in HTML” likely refers to inline CSS. So let’s look at how you can center an image in HTML with inline CSS.
How to Center an Image in HTML Horizontally
There are two ways to center an image horizontally. Both are relatively simple.
The first way is wrapping the image in a block element so that I can use the text-align property. In the example below, I’m going to wrap the image in a div and then apply the style attribute with the text-align property set to center. It’s simple, but only works if the image is smaller than your viewport.
Here’s the HTML with inline CSS:
<h2>How to Center an Image with the Text Align Property</h2>
<p>In this example, the image is wrapped in a block element (a div, specifically). The div is styled with the text align property to center the image below. This is the simplest but most limited method: it only works if the image is smaller than the viewport.</p>
Let’s say I have a very large image that I want to center. In that case, I’m not going to wrap the image in a block element. Instead, I’m going to define it with the CSS display property and set it to "block.” This will tell the browser to treat the image as if it were a block element and not an inline element and allow me to use the CSS margin property.
Before setting the margins, I want to set the width of the image to a fixed amount so it doesn’t span the viewport. In this case, I’ll use the percentage value of 60%. Finally, I’ll set the left and right margins to "auto” so that they’re equal.
Here’s the HTML with inline CSS:
<h2>How to Center an Image in HTML</h2>
<p>In this example, inline CSS is used to center the image below.</p>
<p>First, the display property is set to "block," which tells the browser to apply the following CSS as if it were a block element and not an inline element. The width of the image is then set to a fixed percentage value. The margins on the left and right are set to "auto," which means the remaining blank space of the viewport will be split equally on both sides.</p>
Centering any element vertically is more difficult than horizontally, but it’s still doable. For the demos below, I’m going to use internal CSS rather than inline CSS. Because I’m using more complicated CSS properties, I think it will be easier to understand and follow the format of internal CSS.
To center an image vertically, you can wrap it in a block element like a div and use a combination of the CSS position property, the left and top properties, and the transform property. You start by setting the position of the div containing the image to absolute so that it’s taken out of the normal document flow.
Then set the left and top properties to 50%. This tells the browser to line up the left and top edge of the div containing the image with the center of the page horizontally and vertically (ie. 50% to the right and down the page). Here’s the problem: having the edges of the div lined up in the middle of the page will make the div look off-center.
That’s where the CSS transform property comes in. To truly center the div containing the image, you can use the translate() method to move the div along the X- and the Y-axis. Specifically, you want to move the div 50% to the left and up from its current position so that the center of the image lines up with the center of the page. To move left and up, you’ll need to use negative values.
Here’s the CSS:
transform: translate(-50%, -50%);
Here’s the HTML:
<h2>How to Center an Image Vertically</h2>
<p>In this example, the image is wrapped in a block element (a div, specifically). The div is styled with the position, left, top, and transform properties to center the image below. </p>
Notice I included the border of the code editor to show that the image is not only centered horizontally — it’s also centered vertically.
For the next example, I’m going to use Flexbox. Flexbox is a responsive layout model that doesn’t require margin calculations, but does require some other configurations.
To center an image horizontally and vertically with Flexbox, you need to wrap it in a block element like a div. You need to define this div as a flex container by setting the display property to “flex.” Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the image within the div) vertically and horizontally.
Last step: don’t forget to set the height of the HTML, body, and parent container to 100%.
Again I included the border of the code editor to show that the image is centered horizontally and vertically.
Creating Your Layouts
With a bit of coding knowledge, you can center an image horizontally and vertically. Knowing how to align images and other inline elements will help you control and customize your layouts so you can build a site that looks and does exactly what you want.
Originally published Jul 27, 2020 7:00:00 AM, updated July 27 2020