5
Contributors
9
Replies
10
Views
5 Years
Discussion Span
Last Post by NetJunkie
0

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.

0

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.

0

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.

0

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

0

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

0

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.

0

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}

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.