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
- Converting to a block-level element
- Using the center tags
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 only be done once, 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.
Converting to a block-level element
By adding a rule either to the head of your page (shown in the example below) or local imported CSS file, you can turn the inline <img> element into a block-level element, thus allowing it to be centered properly.
Example HTML code:
<style type="text/css">
.centerImage
{
text-align:center;
display:block;
}
</style>
With this code, you can apply the center Image 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>
Posts
