How to align images in CSS?

Images are an important part of any web application. Including a lot of images in a web application is generally not recommended, but it is important to use the images wherever they required. CSS helps us to control the display of images in web applications.

Aligning an image means to position the image at center, left and right. We can use the float property and text-align property for the alignment of images.

If the image is in the div element, then we can use the text-align property for aligning the image in the div.

Example

In this example, we are aligning the images by using the text-align property. The images are in the div element.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div {  
 border: 2px solid red;
 }
 img{
 height: 250px;
 width: 250px;
 }
#left {  
 text-align: left;
 }
 #center {  
 text-align: center;
 }
 #right{  
 text-align: right;
 }</style>  
</head>  
<body> 
<div id ="left">
<img src="lion.png">
</div> 
<div id ="center">
<img src="lion.png">
</div>
<div id ="right">
<img src="lion.png">
</div>
</body>  
</html>    

Test it Now

Output

Using float property

The CSS float property is a positioning property. It is used to push an element to the left or right, allowing other elements to wrap around it. It is generally used with images and layouts.

Elements are floated only horizontally. So it is possible only to float elements left or right, not up or down. A floated element may be moved as far to the left or the right as possible. Simply, it means that a floated element can display at the extreme left or extreme right.

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
 img{
 height: 200px;
 width: 250px;
 border: 7px ridge blue;
 }
#left{  
 float: left;
 }
 #right{  
 float: right;
 }</style>  
</head>  
<body>
<img src="lion.png" id ="left">
<img src="lion.png" id="right">
</body>  
</html>    

Test it Now

Output