How to center a picture on a web page using HTML

Updated: 09/12/2023 by Computer Hope

Although it's not necessarily difficult, centering images on your web pages may be more involved than you think. The main reason is that the <img> tag is an inline element, so it behaves differently than block-level elements. Some approaches use HTML (HyperText Markup Language) or CSS (Cascading Style Sheets), and some are considered more "proper" than others in that they are not deprecated. To position an image in the center of your web page, select a method from the list below and follow the instructions.

Using the style attribute

For support in HTML5, use a style attribute with the value text-align:center inside of a block-level element; such as a <p></p> tags.

Example HTML code

<p style="text-align:center;"><img src="https://www.computerhope.com/cdn/media/logo-200.png" alt="Logo"></p>

Note

Placing the above code in a div may affect how it appears on a screen. For example, adding the code to a div with a right margin changes the location of the centered image.

Tip

Adding an inline style as shown above should ideally be done only once in a document. If you need to center multiple images, use the below suggestion and create a CSS class to help reduce redundant code and speed up your web page.

Example of image center using above code

Converting to a block-level element

One way you can properly center images is to define the <img> element as a block-level element. To do this, add a rule to the head of your page (shown in the following example), or a linked external CSS file.

Example HTML code

<style type="text/css">
.centerImage
{
 text-align:center;
 display:block;
}
</style>

With this code, you can apply the centerImage class to an <img> tag without having to nest it in a block-level element. This method works for multiple images.

Example centered image code

<img src="https://www.computerhope.com/cdn/media/logo-200-gray.png" class="centerImage" alt="CH Logo" height="120" width="350">

Using the <center> tag

You can center a picture by enclosing the <img> tag in the <center></center> tags. This action centers that, and only that, picture on the web page. It should be noted that this method is deprecated in HTML5 and will not always work in all browsers going forward. We only recommend using this method if none of the other suggestions mentioned above work where you are trying to center an image.

Example HTML code

<center><img src="https://www.computerhope.com/cdn/media/logo-200-gray.png" alt="what image shows" height="150" width="200"></center>