How to Center an Image in HTML?

Overview

If you have worked with HTML and CSS, you know how frustrating it is to deal with images in HTML, especially how to center an image in HTML. The problem is that the <img> tag is an inline element and works differently than the block elements which makes it difficult to center align it that easily. If you are a beginner trying to learn HTML and CSS, and if dealing with image alignment seems like the biggest problem in your life, you are not alone. Many developers struggle with image handling in general, let alone image alignment. But you don't have to worry because in this article we will show all the different methods which will answer the question, How to center an image in HTML?

Pre-requisites

Before we move ahead, you should have prior knowledge about some basic concepts of HTML especially inline and block elements. You can learn more about them here -

How to Center an Image in HTML

We use <img> tags in HTML for adding images to our webpage, but the problem is that the <img> tag is an inline element which makes it difficult to align it that easily. We can use any of the following methods and perfectly center an image in HTML.

We can use the text-align property of the style attribute and set it to center.
We can align our image by converting it into a block-level element
We can use the <center> tag to align one particular image.
We can use the CSS flexbox feature
We can also use the CSS grid feature

Let's look at an example.

Output: centering an image in html

As we can see our image is perfectly centered with respect to our page. Now let's understand each method in a little more depth.

Method 1: Using the Style Attribute

We can center an image in HTML using the text-align property in the style attribute and setting it as center. This will center everything inside the tag.

NOTE: There's a small problem, the text-align property works only on block elements and img is an inline element. Well, a quick fix is to wrap the img tag inside of a block element such as a div and use the text-align property on that div to center the image.

HTML:

NOTE: We have already set the text-align property as center in the HTML code. Below provided CSS is added just to make the output look better.

CSS:

Output: Aligning an Image in Center

Method 2: Converting the img Tag to a Block-Level Element

Another way to center an image in HTML is to convert the img tag which is an inline tag into a block-level tag. This can be done by setting the display property in CSS to block. Once that is done, We can simply set the margin property to auto, which divides all the space equally on the left and right sides of our image, centering it perfectly.

HTML:

CSS:

Output: Centering an Image with Display Property

Method 3 : Using the <center> tag

If we want to center one particular image on the page, we can use the <center> tag. We can wrap the img tag inside of the <center> tag and it will center that particular image.

NOTE: This method might not work on some browsers and is deprecated as it may have been removed from the relevant web standards or maybe in the process of being removed.

HTML:

NOTE: We have already used the center tag in the HTML code. Below provided CSS is added just to make the output look better.

CSS:

Output: Centering an Image with Center Tag

Method 4: Using CSS Flexbox

The introduction of the flexbox made it much easier to control the position of the images and center them properly. All we need to do is to put our image inside of a container such as a div and set the display property for that container as flex. Then just select the justify-content property as center. Let's look at an example.

HTML:

CSS:

Output: Centering an Image with Flex Property

Method 5: Using CSS Grid

We can center our image using the CSS grid by wrapping our image inside of a container such as a div and then setting the display property of that container as grid. Then set the place-items property as center and we are done. Let's look at an example.

HTML:

CSS:

Output: Centering an Image with Grid Property

Conclusion

<img> tag is an inline tag.
We can wrap the img tag inside a block type tag such as a div tag and set the text-align property as center.
We can covert the inline img tag into a block tag by changing the display property to block.
We can also wrap our img tag inside of a center tag and that will center that particular image.

Thank you for reading!