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 tag is an inline element, so it behaves differently than block-level elements. Some approaches use HTML or CSS, 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
tags.- Using the style attribute.
- Converting to a block-level element.
- Using the
tag.
Example HTML code
Example of image center using above code
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.
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.
Converting to a block-level element
One way you can properly center images is to define the 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.
With this code, you can apply the centerImage class to an tag without having to nest it in a block-level element. This method works for multiple images.
Example centered image code
Using the tag
You can center a picture by enclosing the tag in the
Related information
- How to create images that are right-aligned on a web page.
- How to center text in HTML.
- See our HTML and CSS definitions for further information and links related to these terms.
- Computer Hope media library.
- HTML and web design help and support.
