How to Center Align Image inside Div Using HTML and CSS

In this tutorial, learn how to center align image inside div using HTML and CSS. The short answer is: use the CSS text-align property to center align single or multiple images in the div element.

Let’s find out with the examples given below.

How to Center Align Image inside Div Using HTML and CSS

To center align the single image inside the div element, you have to mention a class name for the div element. After that, apply the CSS text-align property with center as its value to the <div> element as given below:

Test it Live

Output

Center align image inside div using html and css

The above example contains a single image to make it center align. This is the simple yet efficient method to center align any image you want inside the div element. If you want to center align multiple images, you have to keep reading and check the below given example for the same.

Center Alignment of Multiple Images

To center align multiple images inside the div element, you need to place all the images inside the div element. After that, apply the CSS property text-align and apply center as its value to the <div> element as given below:

Test it Live

Output

Image 1Image 2Image 3

The above example contains the three center-aligned images. However, you can add more multiple images inside the div element.

Place any minimal size image inside the div element and apply the CSS text-align:center for the div element. Center alignment of images is the required task while designing any website or theme for any client. Whether you have a single image or multiple images, you can make the alignment of all of them sequentially using this method.

You May Also Like to Read

I hope you like this post of aligning images to the center position.