Image alignment with CSS [Archive]

View Full Version : Image alignment with CSS

Grant Palin

01-18-2003, 01:05 AM

How can I use CSS to center-align an image on may page? The only align I know of is text-align, and that's for text.

meow

01-18-2003, 01:48 AM

It's for text content. That includes images.

p { text-align: center }
-------

<p>
<img src="" alt=""></p>

That will work. Note that it centers inline content within the P, not the P itself. For that you would need 'margin-right: auto; margin-left: outo' with the usual workarounds for IE5.x.

Grant Palin

01-18-2003, 02:04 AM

Originally posted by meow
It's for text content. That includes images.

p { text-align: center }
-------

<p>
<img src="" alt=""></p>

Okay, thanks. Could I do that for tables as well?

That will work. Note that it centers inline content within the P, not the P itself. For that you would need 'margin-right: auto; margin-left: outo' with the usual workarounds for IE5.x.

I'm sorry, I don't really understand. Could you explain it a little more for me?

meow

01-18-2003, 02:26 AM

I'll try. :p

'text-align' is the equivalent to the align attribute to for instance P in HTML. You can make text left aligned, right aligned, centered or justified.

To center a whole block is something else. Take the same P with its image and try this:

body { text-align: center }
p { width: 50%; background: red; margin-right: auto; margin-left: auto }

The 'margin-right: auto; margin-left: auto' bit will center the P in good browsers. But IE5.x Win doesn't understand that.

It incorrectly centers blocks when you use 'text-align: center' though. So as a hack for IE one can apply that to a block that contains the block that should be centered. Here I used it with body but you could also slap a div around the P and use it with that.

Note that you have to reset things for good browsers. If you don't want the image centered within the P you have to set text-align to left in the rule for P .

Did I just add to the confusuion? :(

Grant Palin

01-18-2003, 02:32 AM

Maybe it'll be easier for me to understand if you show me...

Let's say I want to center a table on the page, as follows:

<table border="0">

How could I do it?

The images are centered now, I'm just asking about tables.

meow

01-18-2003, 02:34 AM

Okay, thanks. Could I do that for tables as well?

Oh, yes you can use text-align to align table CONTENT.

td { text-align: center }

or use a class if you only want some cells affected.

.something { text-align: center }

<td class="something">

Grant Palin

01-18-2003, 02:35 AM

I mean the whole table, centered on the whole page.

meow

01-18-2003, 02:39 AM

Originally posted by Grant Palin
Maybe it'll be easier for me to understand if you show me...

Let's say I want to center a table on the page, as follows:

<table border="0">

How could I do it?

The images are centered now, I'm just asking about tables.

The CSS:
div.ie { text-align: center }
table { margin-right: auto; margin-left: auto; width: 80%; text-align: left }

If IE5 is a concern you need to add text-align: center to either body or a DIV around the table. I chose a DIV this time. ;)

The HTML:
<div class="ie">
<table>...</table>
</div>

Grant Palin

01-18-2003, 03:08 AM

I put the code you supplied into my page. The margin stuff inside the table tag didn't do anything. Would that be because I'm using Internet Explorer 6?

But when I added the div around the table, the table was then centered on the page. So to support most (if not all) browser, I should use the following:

<div style="text-align:center">
<table border="0" style="margin-right: auto; margin-left: auto;">
<tr>
......
</tr>
</table>
</div>

Is that right?

meow

01-18-2003, 03:18 AM

I don't have IE6 installed but what I've heard it should support the proper way to center a block.

Did you use a Doctype? IE6 (as well as Moz) has two rendering modes. Some DTD's and the lack of a DTD will throw it into Quirks Mode and it emulates IE5 rendering.

Try with this and see if it obeys:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Grant Palin

01-19-2003, 01:45 AM

I put in the doctype you supplied, but my page now has a horizontal scrollbar. This is the doctype I was using before:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Is there something wrong with the doctype that I haven't noticed?

In an earlier post of mine, I was asking why when I put the XHTML Transitional DTD in my page, I was getting a horizontal scrollbar. I wonder if this problem might be related...

Catman

01-19-2003, 02:28 AM

If you have anything set with a width of 100% or so, that could account for the horizontal scroll bar.

meow

01-19-2003, 07:01 AM

It's nothing wrong with that DTD. Only it triggers Quirks Mode and the one I posted triggers Standards (often called Strict) rendering Mode in IE6.

Here's some sites for you:
http://gutfeldt.ch/matthias/articles/doctypeswitch.html

http://richardinfo.com/case_studies/doctypes.html

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

http://www.mozilla.org/docs/web-developer/quirks/doctypes.html

Grant Palin

01-22-2003, 01:40 AM

Just so you know, this page is in a frameset; i don't know if that's the reason or not.

Why don't I put this particular page online and you can see it for yourself? Maybe it's something in Internet Explorer 6 that's causing it, some kind of bug perhaps?