Home/ Questions/Q 8978293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T19:34:32+00:00

I have a blue box on a page that is 100 px from the

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0