Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Positioning tips.
search engine optimization story search.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Increase traffic.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

HTML Tip:
Centering Images Is Harder Than You Think

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
September 2004
Vol. 7, No. 10
 • Promotion Tip
 • HTML Tip
 • Browser Tip
  

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>

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>

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.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2010,
Keynote NetMechanic
All rights reserved.