center text in a div

[Violet_82]

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

[epicrevolt]

There are multiple methods available for centering DIVs, but you are limited if you do not want to create any additional DIVs. A great article at http://blog.themeforest.net/tutorials/vertical-centering-with-css/ explains multiple methods for centering text within a DIV.

[jwmollman]

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.

[JorgeM]

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.

[Violet_82]

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.

[JorgeM]

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

[JorgeM]

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

[JorgeM]

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.

[JorgeM]

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.

http://www.w3.org/Style/Examples/007/center.en.html

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}

[NetJunkie]

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>
</div>

You can also skip using the style method:

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

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

-Chris Harris