We frequently get questions from subscribers who are having problems centering images - particularly when they're mixing the ALIGN attribute with style sheet properties. There are two main causes: HTML rules and browser compatibility issues.
Some Elements Center, Others Don't!
First, remember that the ALIGN attribute is a deprecated HTML attribute, meaning it's marked for deletion in future versions. Of course, deprecated doesn't mean that it will stop working tomorrow or even next year. But it does mean that you should be alert to display issues in current and future browser versions.
Since ALIGN may not behave as you expect, how should you center an image?
Your first thought is probably to include the align="center" property/value pair to your image tag. After all, it works for paragraphs, tables, and other elements:
<p align="center">paragraph content here</p>
<table align="center">table content here</table>
<div align="center">div content here</div>
<h2 align="center">header content here</h2>
<table align="center">table content here</table>
<div align="center">div content here</div>
<h2 align="center">header content here</h2>
The content inside those tags centers reliably across browsers because they're block-level tags. But the IMG tag is an inline element, so it displays relative to the content around it. That's why the only supported ALIGN values are those that indicate how text and other page elements should display in relation to the image.
You can move an image to the left or right on the Web page or control its vertical placement with the ALIGN property, but you can't center it using the ALIGN attribute. align="center" isn't valid HTML. All browsers ignore align="center" when it's part of an IMG tag.
Learn more about valid ALIGN values in a previous Webmaster Tip:Wrapping Text Around Images.
Deprecated Alignment Strategies
The simplest way to center an image is to place it inside opening and closing CENTER tags:
<center><img src="imgName.gif" alt="image description" height="100" width="100"></center>
Unfortunately, the CENTER tag is also deprecated and becoming somewhat unreliable in the most recent browser versions.
Another simple solution is to enclose the image inside a page element that CAN be aligned to the center - such as a paragraph or a DIV tag:
<p align="center"><img src="imgName.gif" alt="image description" height="100" width="100"></p>
<div align="center"><img src="imgName.gif" alt="image description" height="100" width="100"></div>
<div align="center"><img src="imgName.gif" alt="image description" height="100" width="100"></div>
That solution works in all browsers, but you'll have to contend with the extra spaces that browsers automatically place above and below block-level tags. You'll have less control over page layout and display with this method. And remember that both rely on a deprecated HTML tag or attribute.
But a more pressing problem is that once an element or attribute is deprecated there are no firm rules governing how browsers should display it. Most browsers continue to recognize the tag or attribute, but you'll probably encounter display differences between browsers and browser versions.
Cascading Style Sheets (CSS) offer more alternatives, but also have their own set of browser display problems.
Aligning Images With CSS
The most obvious CSS solution is to use the text-align property to center the image. Unfortunately, that has the same effect as adding align="center" to the image tag: browsers ignore it entirely!
Instead, you'll have to apply the text-align property to the container element (the paragraph, DIV, or other block-level element that contains the image).
Create a style class and add it to the HEAD section of your page. Even better, add it to your external style sheet and use it on every page!
<style type="text/css"> .centeredImage { text-align:center; margin-top:0px; margin-bottom:0px; padding:0px; } </style> |
Then, apply the class to the container element:
<p class="centeredImage"><img src="imgName.gif" alt="image description" height="100" width="100"></p>
That's slightly more trouble than just applying align="center" to the paragraph tag, but it has the added benefit of giving you more control over the spacing around the image. Note that in our example, we set the margin and padding values to zero pixels to avoid extra spacing that may push important content farther down the page.
Browser Display Issues And ALIGN
Of course, if you're moderately familiar with CSS, you may have already asked yourself this question:
"Why not just control the inline element problem by converting the problem image from an inline to a block-level tag?"
Yes, it seems simple. Just add this class:
<style type="text/css"> .centeredImage { text-align:center; display:block; } </style> |
and apply it to the IMG you want to center:
<img src="imgName.gif" class="centeredImage" alt="image description" height="100" width="100">
That eliminates the extra code needed for the container tag.
That is (or seems to be) the easiest and most elegant solution. And it is - for Explorer browsers. Other browsers follow W3C standards more strictly than Explorer (even Explorer 6.x) and don't allow you to convert images from inline to block. Just to make it even more confusing though, some of those browsers do allow you to convert other inline elements to block-level!
Carefully check for display problems if you apply styles to any page element that also uses the ALIGN attribute. Some browsers may ignore the deprecated ALIGN attribute value. This is a particular problem in tables.
Always remember to check for coding errors and browser display problems whenever you make changes to your HTML code or your CSS specifications. Verify changes quickly and easily using HTML Toolbox and Browser Photo.
Toolbox scans your page for HTML coding errors and alerts you if you've used browser-specific code. Browser Photo shows you actual screen shots of your page in 16 different browsers, browser versions, and operating system combinations.
