PDA

View Full Version : Image alignment with CSS



Grant Palin
Jan 18th, 2003, 02: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
Jan 18th, 2003, 02: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
Jan 18th, 2003, 03: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
Jan 18th, 2003, 03: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
Jan 18th, 2003, 03: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
Jan 18th, 2003, 03: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
Jan 18th, 2003, 03:35 AM
I mean the whole table, centered on the whole page.

meow
Jan 18th, 2003, 03: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
Jan 18th, 2003, 04: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
Jan 18th, 2003, 04: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
Jan 19th, 2003, 02: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
Jan 19th, 2003, 03:28 AM
If you have anything set with a width of 100% or so, that could account for the horizontal scroll bar.

meow
Jan 19th, 2003, 08: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
Jan 22nd, 2003, 02: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?

PHKatz
Oct 20th, 2013, 11:06 PM
Although this is an old post, I'm just sending thanks for this information, because it helped me with a similar issue.

Andrew Weiers
Oct 22nd, 2013, 11:50 AM
<img align="left|right|middle|top|bottom">