How to center image using CSS?
Answer: We can center align image using the CSS margin property
Images are widely used on the webpage and centering the image is often required during designing the website. In this tutorial, we will be learning about the CSS property used to center an image.
The simplest way to center an image is by using the CSS margin property. First, make the image as a block using display:block property and then apply equal width margin at both sides using margin-left:auto and margin-right:auto.
Example: Center image using CSS
Here, we have used the above property to center the image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.container {
border: 2px dotted black;
}
img {
display: block;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHPUDLySiyP-VtLYCmtr86QGJArjZ1dHsFiEiTr86qooHQsxY3MO88PESD-hKj4qGIE4Q&usqp=CAU" alt="image">
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Center align image horizontally and vertically
In this example, we have centered the image horizontally as well as vertically. For this, we have added position:absolute property to the image and set the left, right, top and bottom property to 0 and used margin:auto property to create equal spacing from all four sides.
Conclusion
We can easily center the image using CSS property. Though text-align: center cannot be used to image but we can set the image to the center using margin property.
