ansaurus

Question

Answer 1

+4 A:

I would recommend putting a <div> into your <td> and setting the style attribute to style="width: 200px; margin: 0 auto;"

The catch is that you must set a fixed width.

Edit: After looking at the question again, I would recommend scrapping the table entirely. Just use a <div style="width: 200px; margin: 0 auto;> as I suggested and no need for a table.

Joe Philllips 2009-04-06 18:43:22

Answer 2

A:

d03boy's answer is correct for the right way to center things.

To answer your other comment, "Also, this seems to have an effect on the text alignment of enclosed elements, which requires tweaking to fix." That's the nature of how CSS works, setting a property on an element affects all of its children, unless the property is overridden by one of them (assuming the property is one that is inherited, of course).

Chad Birch 2009-04-06 18:50:33

Answer 3

A:

Where do you find yourself commonly doing this? For me - I am most often trying to center the entire design of the site, so I usually do this:

<html>
  <body>
  <div id="wrapper">
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
  </div>
  </body>
</html>


body {text-align:center;}
#wrapper {margin:0 auto; text-align:left; width:980px;}

This will center the entire design on the page at 980px width, while still leaving all of your text left aligned (as long as that text is within the #wrapper element).

Michael Wales 2009-04-06 18:58:17

Answer 4

+5 A:

You are right that text-align is intended for aligning text. It's actually only Internet Explorer that lets you center anything other than text with it. Any other browser handles this correctly and doesn't let block elements be affected by text-align.

To center block elements using css you use margin: 0 auto; just as d03boy suggested. Although you don't need to keep the table at all.

The reason that there is no float: center; is that floating is intended to place elements (typically images) either to the left or the right and have text flow around them. Floating something in the center doesn't make sense in this context as that would mean that the text would have to flow on both sides of the element.

Guffa 2009-04-06 19:07:08

Nice catch with the table. I didn't look closely enough at that.

Joe Philllips 2009-04-06 19:17:15

Answer 5

+2 A:

Here is a good resource for centering using CSS.
http://www.w3.org/Style/Examples/007/center
This demonstrates how to center text, blocks, images and how to center them vertically.

Ross Goddard 2009-04-06 19:11:32

ansaurus

tags:

views:

answers:

CSS Appropriate Way to Center Content

related questions