Menu
I have a blue box on a page that is 100 px from the top and left. Then I want text in the blue box to vertically align. Why won't my code below vertically align the text?
<!DOCTYPE html>
<html>
<body>
<div style="height:200px; background:blue; display:table-cell; vertical-align:middle; color:white;position:absolute; top:100px; left:100px;">
this is text;
</div>
</body>
</html>
How do I get the text to vertically align?
Notes - If I remove position absolute, then the text vertically aligns. But this is not acceptable, because I need absolute positioniong for some other things.
366
Contain it in a separate div like this:
CSS
#Div0 {
position:absolute;
top:100px;
left:100px;
}
#Div1 {
height:200px;
background:blue;
display:table-cell;
vertical-align:middle;
color:white;
}
HTML
<div id="Div0">
<div id="Div1">
this is text
</div>
</div>
Solution Example: http://jsfiddle.net/rgDfg/
169
It'll work if you remove the position: absolute;
So your CSS will look like this,
div{
height:200px;
background:blue;
display:table-cell;
vertical-align: middle;
color: white;
}
Check the fiddle link
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
