Centering an image using HTML and CSS can help you create a sense of symmetry on your website and effectively drive attention to the most important elements on the page.
The problem: If you don’t have any coding experience, aligning any element with HTML code can seem like a tough task. In this article, we’ll cover everything you need to know about centering images (or any inline elements) and walk you through several beginner-friendly tutorials. By the end, you’ll be able to center images with your eyes closed.
- Understanding HTML and CSS When Centering an Image
- How to Center an Image Horizontally
- How to Center an Image Vertically
Considerations When Centering Images
First, why should you center images — or any other element — in the first place? Human beings crave symmetry on and offline. This preference is so strong that it’s actually hardwired in our nervous system and has been for thousands of years.
Symmetry doesn’t mean things have to be identical on either side of an axis. There are several ways to create symmetry in a website, and the one we’ll be discussing in this article is balance.
Achieving balance in your website relies largely on the alignment of elements on a page. Centering elements, particularly large elements like images, can help make your design look ordered and visually pleasing.
The Beginner's Guide to HTML
Fill out the form for your free intro to HTML guide.
The centering process isn’t difficult, but it varies depending on whether the elements are inline or block. There are a few differences between these element types, but the major difference is how they affect the flow of a page.
Centering Inline vs. Block Elements
Block elements work by breaking the flow of a page, whereas inline elements work by going with the flow.
Block elements start on a new line and take up the full width of the viewport (or the width of the page). Inline elements, on the other hand, occupy the space allotted by their HTML tags, allowing them to go with the “flow” of the page as opposed to interrupting it. Of course, the width and style of these elements varies depending on the CSS code for that HTML tag.
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.
The inline button would need special code to be aligned to the center, while the block button would simply need some adjustments in width or padding.
Tldr; Block and inline elements require different methods for aligning them to the center. For instance, when you center a div (which is a block element), you might use margin and padding or other methods.
However, you cannot use these methods when centering images.
That’s because images are inline elements and go with the flow of the page. Like the inline button above, you’ll need special code to place it in the center of the page.
Below, we’ll walk through the process for centering an image or any inline element in HTML and CSS. This process will work whether you’re building your site from scratch or using a framework like Bootstrap CSS. But first, let’s cover some of the basics of HTML and CSS.
Learn More: The Beginner's Guide to HTML & CSS
Want to learn more about HTML? Download our free guide for best practices for getting started with HTML.
Understanding HTML and CSS When Centering an Image
Before we discuss the different ways to center an image, it’s important to clarify what “in HTML” actually means. In other words, where would you add the “centering” code for your image? Right within the <img> tag? Or would you have to go straight to your website’s CSS code? Let’s take a look.
Centering Images with the Deprecated <center> Tag
Once upon a time, there was an HTML <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 a single line of HTML that looked something like this:
<center><img src="image1.jpg" alt="centered image" height="598" width="398"> </center>
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 for centering an image in HTML? The most important thing to understand is that centering an image today will require you to add CSS to HTML. You can no longer use HTML exclusively.
Centering Images with CSS
To center an image, you’ll need to use CSS. You have several options: internal CSS, external CSS, or inline CSS.
Internal CSS is placed in the <head> section of a webpage, while external CSS is located in an external stylesheet that’s then linked in the <head> section. Inline CSS, on the other hand, is embedded in the HTML code in the <body> section. The CSS is defined within the “style” attribute of the element being targeted.
Generally, it’s recommended to keep your HTML separate from your CSS, but any of these methods will render the same result. 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.
The good news is that the syntax for inline CSS is similar to that of internal and external CSS. The property is named and given a property value, but the rule set is enclosed by apostrophes rather than brackets.
Here’s an example of inline CSS in action. Let’s say you want to change the text color of the first header on your page and leave the other headers as is. You’d set the color property to the hex color code you prefer, place it within the style attribute, and place the whole thing inside the H2 tag.
Check it out below:
How does this compare to internal CSS? Let’s say you wanted to use that same CSS but place it in the head section between <style> tags.
You’d replace the "style=" attribute in your HTML with a CSS selector. A CSS selector is a name that you use to identify an HTML element. You then use this name in the CSS file to design the look and feel of that element.
This is also how the CSS would look in an external stylesheet. You would link to the external stylesheet between the <head> tags of your page. Check out an example of an external stylesheet below, with the same result:
Now that we understand the different ways you can write CSS, let’s look at how you can center an image using both HTML and CSS.
How to Center an Image in CSS
There are a number of ways you can center an image, depending on whether you want to center it horizontally or vertically. We'll start by looking at how to center an image horizontally.
How to Horizontally Center an Image
There are three ways to center an image horizontally. The first works better for smaller images, and the second for larger images. The third works best if you're using the responsive layout model Flexbox.
We'll cover all three so you can center any image, no matter the size, on your website.
Method 1: Using the Text-Align Property
To center an image horizontally, you can use the CSS text-align property.
Step 1: Since this property only works on block-level elements and not inline elements, let’s start by wrapping the image in a block element.
Step 2: Wrap the image in a div and then apply the style attribute with the text-align property set to center. It’s simple, but it only works if the image is smaller than your viewport.Here’s the HTML with inline CSS and the result:
Method 2: Using the Margin Property
Let’s say you have a very large image that you want to center. In that case, wrapping the image in a block element wouldn’t be the best option. Instead, you’d want to define the image with the CSS display property and set it to "block.” Here’s how to center an image using the margin property.
Step 1: Before setting the margins, 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%.
Step 2: Set the CSS margin property by defining the image 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, not an inline element, thus allowing you to use the CSS margin property.
Step 3: Set the left and right margins to "auto” so that they’re equal.
Here's the CSS with the result:
Method 3: Using the Flex Property
You can also center an image horizontally using the flex property, which doesn’t require margin calculations.
Step 1: Wrap the image in a div element.
Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item.
Step 3: Set the justify-content property to "center."
Step 4: Set the width of the image to a fixed length value.
Here's the CSS with the result:
Click on the HTML button to see the HTML code as well.
Hot tip: Give an ID selector to your div and use the selector in your CSS code. That way, all divs on your website aren’t affected.
How to Vertically Center an Image
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.
Method 1: Using the Position Property
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.
Step 1: Start by setting the position of the div containing the image to absolute so that it’s taken out of the normal document flow.
Step 2: 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.
Step 3: 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:
Method 2: Using the Flex Property
Step 1: To center an image horizontally and vertically with Flexbox, start by wrapping it in a block element like a div.
Step 2: Define this div as a flex container by setting the display property to “flex.”
Step 3: 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.
Step 4: Set the height of the div container to a proportionate height.
Here’s the CSS with the result:
Creating Your Layouts
With a bit of coding knowledge, you can bring a sense of symmetry and balance to your site with center aligned images, texts, and buttons. Knowing how to align these elements will help you control and customize your layouts for a professional look that your website visitors will enjoy.
Editor's note: This post was originally published in November 2020 and has been updated for comprehensiveness.
Originally published Mar 23, 2022 7:00:00 AM, updated May 16 2022
Topics:Bootstrap & CSS