HI there, it might be perhaps a silly question, but in here http://antobbo.webspace.virginmedia.com/testing/test.htm how do I center the letters in the coloured divs? I want them to be in the middle of the box, but without adding extra divs...is it possible? Can quite do it, sorry

I always had trouble on how to do this, but I found Dead Centre to be the best way to implement text centered right in the middle of a <div>. It involves using more <div> tags, but I think it might be the only way to get text centered that way.

It looks like they are using three nested <div>s, but maybe you could try combining styles somewhere and possibly shortening that requirement.

you will most definately need to use more than one div to accomplish this. there are various methods, all well documented and can be found by doing a search.

thanks for the help guys, very useful especially the articles. One thing: it was also suggested to me that the text can be centred using padding (I didn't really think about it). So say you want to have a div of 400px: you create a div of 200px and you give it padding-top:200px; and the div is now 400px and the text is in the middle. Neat.

again...several properties you can try padding, margin, position, etc. the only thing for sure is that you'll need several elements, typically divs.

Violet 82 is really asking how to vertically align the text in the middle of the div, not center the text within the div.

Oh, and by the way, the center tag in HTML is deprecated and should be avoided. Using the CSS property "text-align" is the preferred method when centering text.

I looked at the W3C site and found an article regarding their suggestion regarding vertically alignment. While CSS 2 does not formally support this, it seems to be a good work around where the majority of the browsers out there (IE 8 & 9) will support.


If you need to horizontally align the div, you'll need to place a div within a div. On the outer div, set a width and left and right margin to auto. For the inner div, follow the W3C's suggestion: {min-height: 10em;display: table-cell;vertical-align: middle}

You could create a <p> tag to create your text and just put that inside of your <div> and mess around with the style properties, like so:

<div id="test" align="center">
    <p style="align:center">Your Text Here</p>

You can also skip using the style method:

<div id="test" align="center">
    <p align="center">Your Text Here</p>

This code creates a centered <div> and it also centers the text inside of the <div>. Hope this helps!

-Chris Harris