[HTML5] Center Content

Back in the day when you had to center content, it was actually quite simple.
Just put <center> .. </center> around the parts you want to center and you were good to go. The <center>-tag has been deprecated and should no longer be used. In XHTML1 and up it’s desirable to at least use <div align="center"> .. </div> as a container around the parts you want to center. But this has a few tiny drawbacks, such as nesting nested container divs, and you would still need to css text-align: left; your content. In this article I am going to explain that you should focus using HTML5 for the architecture of your design, and use CSS3 for the actual visual design of your design.

Centering content on the page the HTML5 way.

Basically you could try to understand and remember it quite easily. In HTML5 if you have a block in which you put your content. You can center this block, and you can align the content in this block.

Back in the day you’d use <center> but we’re now replacing ‘center’ with center point in the block, with no margin. And we’re using CSS to do this. And to align the content in the block we’re using text-align. A block therefor must have a width, otherwise it has no space, no pixels, to use. Oh, and remember: this is horizontal margin.

For the sake of simplicity I have put the div/css in steps, instead of tidy, compressed, optimized css.
HTML5 div block, with content:

<div class="gray fourhundred center">
This block has three classes, the .gray, .fourhundred and
.center classes. They are defined in the .css file, and make the background gray, the block 400
pixels wide, and centers it. The .css file also has properties for div, where we set margin,
padding and left-align the text.
</div>

CSS3 part:

div
{
	padding: 6px;
	margin: 6px;
	text-align: left;
}

.gray
{
	background-color: #DDD;
}

.fourhundred
{
	width: 400px;
}

.center
{
	margin: 0 auto;
}

Which will make it look like so:

So, remember to move the aligning of text and centering of blocks to the css part of your design. And avoid nesting your divs where possible. And that without a width it won’t be able to center. And to center the block if you want to center your blocks. And to use text-align to center your content in the block.

I hope this information is useful and explains how I, and I think everybody should, approach building a design, and designing it with HTML5/CSS3. And a good start to building more complex designs.