Issue
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.
Solution
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/
Answered By - ToddBFisher Answer Checked By - Marie Seifert (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.