How to center a picture on a web page using HTML

Updated: 11/13/2018 by Computer Hope
3D HTML letters

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; others use CSS, and some are considered more "proper" than others in that they are not deprecated. To proceed, select a method from the list below and follow the instructions.

Using the style attribute

For support in HTML5, you should 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="logo.gif" alt="Logo"></p>
Tip

Adding an inline style as shown above should ideally be done only once in a document. If you need to center multiple images, you should 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

Computer Hope Logo

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="logo.gif" class="centerImage" alt="CH Logo" height="120" width="350">

Using the <center> tags

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="logo.jpg" alt="what image shows" height="150" width="200"></center>

Additional information