ansaurus

Question

How to get align="center" effect in CSS and be XHTML compliant and have it work on most browsers

Answer 1

A:

Horizontal auto margins on an block/table element would horizontally center it assuming it's positioned relatively/statically, has explicit or intrinsic width ( example being a table ) and not floated with the document in standards mode, though there are minor exceptions.

It might be better to actually provide an example where the element isn't centred.

meder 2009-10-01 03:45:02

Answer 2

+7 A:

It's:

text-align: center;

for horizontal centering but:

vertical-align: middle;

for vertical centering but vertical centering this way will pretty much only work with table cells. To get cross-browser vertical centering without using tables look at Vertical Centering in CSS (yes it's non-trivial).

Note: text-align: middle and vertical-align: center are incorrect values.

To horizontally center a block element, the usual trick is:

<div id="outer">
  <div id="inner">Some test...</div>
</div>

with:

#outer { width: 600px; }
#inner { width: 300px; margin: 0 auto; border: 1px solid black; }

Bear in mind, that this won't necessarily work with certain versions of IE in the euphemistic "quirks" mode. It's a good practice to force IE into (also euphemistic) "standards compliant" mode by using a DOCTYPE at the top of your document.

cletus 2009-10-01 03:50:43

Answer 3

A:

display:block; margin:0px auto;

That will center a block inside its parent without centering its content.

2009-10-10 15:48:08

ansaurus

tags:

views:

answers:

How to get align="center" effect in CSS and be XHTML compliant and have it work on most browsers

related questions