How to Center Align Image inside Div Using HTML and CSS

Last Updated on February 13, 2021 by Roshan Parihar

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:

Output

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:

Output

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

• How to Change Image on Hover Using HTML, CSS, and JQuery
• Change Image On Dropdown Select Option Using jQuery
• Show/Hide Image on Hover Anchor Link Using jQuery

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