How to Align Image in HTML?
FREE
Overview
Image alignment is a technique for repositioning images on our web pages (top, bottom, right, left, and centre). We could align the image using the <img> align attribute or using CSS. In this article, we are going to see both methods of image alignment.
Align Image in HTML Using CSS
Center Alignment (horizontally center)
Set the left and right margins to auto and make the image into a block element to center it.
Output :
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
Middle Alignment (vertically center)
Set the vertical-align as middle.
Output :
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
Top Alignment
Set the vertical-align as text-top.
Output :
Bottom Alignment
Set the vertical-align as text-bottom.
Output :
Left Alignment
Set the text-align as left.
Output :
Turn Learning into Career Growth
Right Alignment
Set the float as right.
Output :
Align Image in HTML Using the Align Attribute
The align attribute indicates how an image should be aligned concerning its container. To align the image, we use the align attribute. <img> element is an inline element. However, the align attribute has been deprecated since HTML4 as HTML is not meant for formatting. So you should always use CSS for image alignment.
Syntax :
| Attribute Values | Description |
|---|---|
| left | Its purpose is to align the image to the left. |
| right | Its purpose is to align the image to the right. |
Left Alignment
We Use the attribute value left to align the image to the left.
Output :
Right Alignment
We use the attribute value right to align the image to the right.
Output :
Browser Support
| Browser | Version |
|---|---|
| Google Chrome | 38 and higher |
| Firefox | 38 and higher |
| Safari | 9.1 and higher |
| Microsoft Edge | 13 and higher |
| Internet Explorer | 10 |
Conclusion
- We have looked at many examples of image alignment using CSS and the align attribute.
- align attribute is not supported since HTML4, so we should always use CSS for image alignment.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more