How to Center an Image in HTML?
FREE
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?
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
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 -
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
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:
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:
Turn Learning into Career Growth
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:
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:
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:
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:
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
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!
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more