How to center images in CSS?
CSS helps us to control the display of images in web applications. The centering of images or texts is a common task in CSS. To center an image, we have to set the value of margin-left and margin-right to auto and make it a block element by using the display: block; property.
If the image is in the div element, then we can use the text-align: center; property for aligning the image to center in the div.
The <img> element is said to be an inline element that can easily be centered by applying the text-align: center; property of CSS to the parent element that contains it.
Note: The image cannot be centered if the width is set to 100% (full-width).
We can use the shorthand property margin and set it to auto for aligning the image at the center, rather than using the margin-left and margin-right property.
Let’s see how to center an image by applying text-align: center; property to its parent element.
Example
In this example, we are aligning the images by using the text-align: center; property. The image is in the div element.
Output
Example
Now, we are using the margin-left: auto; margin-right: auto; and display: block; properties for aligning the image to the center.
Output
