homepage Welcome to WebmasterWorld Guest from 54.196.62.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to center images
Finally - after all these years!
Hagstrom




msg:1184921
 10:11 am on Feb 8, 2004 (gmt 0)

"One of the goals of CSS is to provide an alternative to HTML extensions."

For more time than I care to admit, I have struggled with finding out how to center images with CSS. Unfortunately the HTML specs [w3.org] only tell you how to center text with text-align:center.

This solution works with Internet Explorer - leading people (like me) to believe that this is the right way to do it. But it's not.

  1. The right way to center objects is to specify margin-left:auto and margin-right:auto.
    This explained in the CSS specs [w3.org].

  2. This won't work for some objects - like images!

    The reason is that images are not considered blocks even though they are quadrangular!

    So you have to specify display:block.

  3. Unfortunately this doesn't work with older versions of Internet Explorer (I have tried IE4).
    So you have to add
    text-align:center.

    This is not a problem for images, but if you use text-align:center to center a text-object your text will also be centered, so you have to have to nest two objects (e.g. a <p> within a <div> )

So the result is:

<style>
img.mycenter {margin-left:auto; margin-right:auto; display:block; text-align:center;}
</style>

<img class="mycenter" src="....." height="...." width="....">

 

isitreal




msg:1184922
 11:33 pm on Feb 8, 2004 (gmt 0)

That's not the only problem with trying to code according to the strict doctype standards, the same problems apply to div elements, centering a webpage for example in the screen is not possible without using <div align="center"> webpage</div>, since IE has bad support of margin:auto; .

It gets even sillier when you try using xhtml strict, since then you can't even declare image width and height in the img tag, but have to create a separate class or id in css for each and every image.

Other problems are if you are embedding say a flash file, only IE supports <object>, which is the standards way to embed something. This is one of the sillier things, to get my xhtml pages to validate as zero error, for example, and still use flash, I javascript in the <embed> tag inside the object tag which fools the validator, but really defeats the whole point.

pageoneresults




msg:1184923
 12:09 am on Feb 9, 2004 (gmt 0)

It gets even sillier when you try using xhtml strict, since then you can't even declare image width and height in the img tag, but have to create a separate class or id in css for each and every image.

Are you sure about that? I have plenty of pages that validate XHMTL 1.1 and all images have width and height assigned. As a matter of fact, it is bad practice not to assign width and height. Why? Ever see what the page looks like when it is loading and you don't have width and height attributes on your images? Everything jumps around until the page is finally loaded.

Without the width and height attributes, there are no image placeholders to prevent the page from breaking apart during loading.

P.S. I have a generic class defined for centering...

.ctr{text-align:center;}

I'll then use that class wherever needed, including images. Works like a charm without having to go the margin:auto route.

[edited by: pageoneresults at 12:17 am (utc) on Feb. 9, 2004]

aevea




msg:1184924
 12:12 am on Feb 9, 2004 (gmt 0)

Hagstrom's suggestion will work fine for centering divs in ie6 with a strict doctype, to make it work for ie5, etc. you need to set the body or div container to
text-align: center; like this:

body {text-align: center; }
.textbox {text-align: left; margin: 1em auto; padding: .5em; border: 5px solid black; width: 70%; }

I've never seen a specification that deprecates img width and height, and I know that they are legitimate attributes for xhtml 1.0 strict. I don't have any experience with flash, but I've used object tags to embed images and pages with no problems in recent opera and mozilla.

Adam

isitreal




msg:1184925
 1:40 am on Feb 9, 2004 (gmt 0)

No, sorry, I was wrong, I thought that img width and height had been deprecated, that's great, I didn't know that, in xhtml 1 and 1.1, that's good to know, I should have checked that on the w3c before saying it. I think I must have read that about XHTML 2, which I believe does not allow that, though I could be wrong.

I completely agree on the need to have the image width and height coded in to avoid that page breakup on page load, that's very annoying, I'm starting to use much more of php's image size functions to write out pages with images, especially galleries, since it's so easy to do once you have the code down.

The problem with things like object now finally being suported on opera and mozilla is that it doesn't help with all the older versions out there, it forces way too much browser sniffing for error free code, kind of a pain, I do it, but I don't like it.

As far as I know, however, there is no way to center a fixed width web page cross browser without using the div align=center method, which is not supposed to be supported in the xhtml strict doctype, although of course it actually works fine in the real world.

grahamstewart




msg:1184926
 10:16 am on Feb 9, 2004 (gmt 0)

img.mycenter {margin-left:auto; margin-right:auto; display:block; text-align:center;}

For maximum backwards compatablity you should specify

text-align:center
on the containing object (not on the object you are trying to center). (I think this is what aevea was getting at)

As far as I know, however, there is no way to center a fixed width web page cross browser

Can't you just enclose the page in a div and use the normal auto-margin technique?


<body>
<div style="width:700px;margin:0 auto;">
blah blah blah blah....
</div>
</body>

Should work just fine on all current browsers.

Note: I wouldn't bother with using text-align on the body tag in this particular case, since it wouldn't be a major disaster if some archaic browsers didn't center the page.

(Better still design 'fluid' pages that can cope with different screen widths)

isitreal




msg:1184927
 5:37 pm on Feb 9, 2004 (gmt 0)

I keep reading margin:0 auto; as a solution but it doesn't work in IE. However, it does work if you create another div with propery text-align:center, just like with the image, which actually takes care of the problem in terms of getting rid of the <div align="center"> tag which is what was keeping me from having xhtml 1 strict doc types, so thanks for helping pinpoint the problem.

Can't you just enclose the page in a div and use the normal auto-margin technique?

<html>
<head>
<title></title>
<style type="text/css">
body, html {margin:0; padding:0;}
#maincontainer {text-align:center;}
#content {width:600px;height:300px;background-color:green;margin:0 auto;}
</style>
</head>
<body>
<div id="maincontainer">
<div id="content">words</div>
</div>
</body>
</html>

grahamstewart




msg:1184928
 5:56 pm on Feb 9, 2004 (gmt 0)

I keep reading margin:0 auto; as a solution but it doesn't work in IE.

Oh yes it does.

Copy and paste this and you should find it works just fine in IE6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="margin:0 auto;width:600px;border:1px solid red">
A centered div.
</div>
</body>
</html>

And if you do want to support older versions of IE then don't bother with a containing div just add text-align:center to the style for the body tag.

isitreal




msg:1184929
 6:08 pm on Feb 9, 2004 (gmt 0)

GrahamStewart: I still test in IE 5.5 mainly so I miss some of these IE 6 things, I'm waiting for IE 5x use to drop below the low teens percent to switch on my main testing platform, since backward compatibility is far more important to me than using the latest thing, thanks for that tip, that would obviously resolve it though, and keep the code very clean.

grahamstewart




msg:1184930
 6:21 pm on Feb 9, 2004 (gmt 0)

Fair enough.
I tend to take the opposite approach: I code for modern browsers, sticking to the standards, and then fix the site for any antique browsers I feel I should support (which typically includes IE5).

DrDoc




msg:1184931
 6:33 pm on Feb 9, 2004 (gmt 0)

Yes, margin auto is only understood by IE6, and only in strict mode. Layouts have blown up for less in IE5.x :(

Hagstrom




msg:1184932
 9:38 am on Feb 10, 2004 (gmt 0)

Thanks for all the comments.

I'm still amazed that it should be so difficult to such a basic thing a centering an image. The <center> tag has worked robustly for many years - even on NS4.

I'm aware that the fundamental principle behind CSS is to separate content from presentation - but I still feel that if the W3C consortium want us to give up this old war horse (and abandon a lot of legacy browsers in the process) the very least they could do was to specify how we're supposed to do it.
image.

isitreal




msg:1184933
 6:40 pm on Feb 10, 2004 (gmt 0)

The failure to provide something like a simple object-align:center; thing that would work on all block level elements, to go along with text-align:center; in CSS is to me truly astounding, I've never understood that one.

DrOliver




msg:1184934
 10:08 pm on Feb 10, 2004 (gmt 0)

The failure to provide something like a simple object-align:center;

There is:

margin: [whatever] auto;

It "just" isn't supported by IE up to 5.* and in IE 6 only when in strict mode (haven't tested that one, though). If only IE had a minor market share, we'd be done.

Or did I misunderstand?

grahamstewart




msg:1184935
 11:02 pm on Feb 10, 2004 (gmt 0)

It "just" isn't supported by IE up to 5.* and in IE 6 only when in strict mode (haven't tested that one, though).

Actually it works correctly with IE6 with all doctypes (Strict,Transitional and Frameset) you just need to make sure you put the browser into 'standards compliant' mode by using a 'full' doctype that includes a URL like those outlined by the w3c [w3.org] for HTML4 and XHTML.

isitreal




msg:1184936
 11:53 pm on Feb 10, 2004 (gmt 0)

grahamstewart: thanks, I was looking all over the w3c for that list of doctypes but couldn't find it.

Actually it works correctly with IE6 with all doctypes (Strict,Transitional and Frameset) you just need to make sure you put the browser into 'standards compliant' mode by using a 'full' doctype that includes a URL

You're absolutely right, I didn't have the full URL in the doctype, exactly as you said.

Hagstrom




msg:1184937
 10:02 am on Feb 11, 2004 (gmt 0)

There is:

margin: [whatever] auto;

It "just" isn't supported by IE up to 5.*

And it isn't supported by NS4 (I suppose that goes without saying :) )
The text-align:center trick doesn't work with NS4 either - but the <center> tag works just fine.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved