CSS Appropriate Way to Center Content

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 Joe Philllips 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.

What is the best way to center a webpage's content using css?

The "margin: 0 auto" is the best way to do it, you just have to be sure to have the right doctype for it to work. I always use XHTML strict - others will work too. If you don't have a good doctype, the content won't center in IE6

To implement the XHTML strict doctype, put this above your node, as the first line in the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

How to align content in center using CSS?

You can use line-height and text-align: center.

.multi-checkbox .check {  display: inline-block;  width: 15px;  height: 15px;  border: 1px solid #333;  margin: 3px;  text-align: center;  line-height: 15px;}
.multi-checkbox .check.unchecked {  background: #fff;}
.multi-checkbox .check.partial:after {  content: "\2010";}
.multi-checkbox .check.checked:after {  content: "\2713";}

<div class="multi-checkbox">  <span class="check partial" hidefocus="" style=""></span></div>
<div class="multi-checkbox">  <span class="check checked" hidefocus="" style=""></span></div>

How to align a div to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

How do I center this form in css?

Another way

body {    text-align: center;}form {    display: inline-block;}

<body>  <form>    <input type="text" value="abc">  </form></body>

how to align text center and right

If you want the item to not mess with the layout, try absolute:

<div id="header" style="position:relative;text-align:center;"><!-- define relative so child absolute's are based on this elements origin -->
    <div id="sampleLink" style="position:absolute; top:0px; right:0px; >Link</div>
    <h1 style="text-align:center;">Heading</h1>
</div>

CSS Appropriate Way to Center Content