Text center in div
<div> <div class="left"> <div align="center" class="node"> <div class="nodeText"> <h2 >test</h2> </div> <div class="node"> <h2>test</h2> </div> <div class="node"> <h2>test</h2> </div> <div> I need to center the text in a div, nothing works
.left { float:left; width:200px; border:solid 1px black; text-align: center; } .node { height:200px; border:solid 1px black; margin:0 auto; } .nodeText{ vertical-align: middle; } h2{ text-align: center; } Tnxs
Do you mean vertical centering, horizontal centering, or both?
Horizontal centering of embedded content is easy. Just apply text-align: center to the containing block. Centering the horizontal block inside another block using CSS is usually done with:
#centerMe { margin: 0 auto; } Note. in IE6, this requires IE to be in "standards compatible" mode, and not in "quirks" mode. To make this always put DOCTYPE in its HTML document. For instance:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Vertical centering is much worse.
You can see Vertical Centering in CSS . This is actually a nontrivial problem. The vertical-align style property that you use applies only to table cells (in a cross-browser reverse way). It would be trivial to do with the table for what it costs.
The HTML you wrote works in my browser (FF 3.5.8). However, you are missing two closing tags <\div> . Your browser may be more restrictive than mine. Also, <center> deprecated, so try to avoid it where possible.
I would put all this in a comment, but my representative is still not tall enough!: /