Html center image in div

Center an image in HTML can be done with the help of <center> tag. The <center> is depreciated from HTML5, so we can use the text-align property, margin, and different ways to center an image horizontally, vertically, or both using CSS.

Horizontally Center an Image using CSS

1.

Using text-align Property

The text-align property in CSS is used to center an image within a container element.

How to align multiple images in html horizontally and vertically

By wrapping the image inside a div and applying text-align: center; to the container, the image gets aligned to the center of the page horizontally.

Example: Center an image using a container div with the text-align: center; CSS property.

Output:

2.

Using CSS margin Property

To center an image is by using the margin property, you need to set the left and right margins of the image to auto. This works when the image as a block element. The browser will automatically adjust the space on either side to center it.

Example: In this example, we set image margin left & right to auto to center the image horizontall

how to center image in html notepad

how to center image in html bootstrap