Question

I built a div that has horizontal centered text using a table and vertical-align: middle.
I added an absolute positioned text inside that div.

it works on chrome, but not in firefox.

you can see the code and how it’s working here.
http://jsfiddle.net/TUwAy/8/

just open it with chrome and see the centered \ absolute positioned texts.

and then open it in firefox and see the absolute positioned text is according to the whole screen rather than the inside the div.

If I remove the table, the absolute positioned text is ok in firefox also, but than I need to find another solution for the horizontal text centering.

any creative ideas in how to solve this?

10x

Answer 1

Seems to be a problem with display: table in conjunction with position: relative.

How about taking the absText out of the “table”?

<div class='clickable' id='wrapperID'>
    <div class='tweetclass'>
        <p> horizontal centered text</p>
    </div>
    <div class='absText'>
        <div id='hid'>abs position text</div>
    </div>
</div>

.absText{
    font-size:10px;
    color:#878787;
    font-weight:100;
    position:absolute;
    bottom:7px;
    right:7px;
}

.clickable{
    cursor:pointer;
    position: relative;
}

jsfiddle