<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 text in div nothing seems to work
.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;
}
Do you mean vertical centering, horizontal centering or both?
Horizontal centering of inline content is easy. Just apply
text-align: centerto the containing block. Centering horizontally a block within another block with CSS is typically done with:Note: on IE6 this requires that IE be in “standards compliant” rather than “quirks” mode. To force this always put a
DOCTYPEon your HTML document. For example:Vertical centering is much worse.
You may want to look at Vertical Centering in CSS. This is actually a non-trivial problem. The
vertical-alignstyle property you’re using only applies to table cells (in a cross-browser backwards compatible way). This would be trivial to do with a table for what it’s worth.