CODEWITHSUNDEEP
htmlcssfirefoxcross-browser
AwokeKnowing
AwokeKnowing

Reputation: 8246

Center text vertically with CSS (table cell) not working in firefox

I have lines of text varying from a couple words to a full sentence. I need that text centered horizontally, and most importantly, vertically.

CSS really needlessly fails at vertical centering (c'mon guys) but I found a solution that works in IE10 and Chrome, and it actually works in firefox too, but firefox pushes the div down below the container.

The html / css looks like:

<div style="position:absolute;">
    <div style="position:relative;width:343.17em;height: 237.38em>
      <svg for cloud />
    </div>
    <div style="position:relative;top:-210em;left:30em;width:240em;height: 180em;display: table-cell;vertical-align: middle;text-align: center">
       <p style="text-align: center;display:inline-block">v-center me</p>
    </div>
</div>

on Chrome and IE it looks like: enter image description here

on FF it looks like: enter image description here

EDIT: here is a the fiddle showing the exact problem. view on chrome then FF.

http://jsfiddle.net/AwokeKnowing/PJJce/

Upvotes: 0

Views: 5014

Answers (1)

Mike Sheehan
Mike Sheehan

Reputation: 530

I was able to get it to work in all 3 browsers by making the following changes to the CSS:

#text-wrap
{
    position:relative;
    top:-100px;
    left:30px;
    border:1px solid blue;
    width:200px;
    height:80px;
    display:table; /* Changed to table instead of table-cell */
    /* Removed: vertical-align: middle; */
    text-align:center;
}

#text
{
    text-align:center;
    display:table-cell; /* Changed to table-cell instead of inline-block */
    vertical-align: middle; /* Added vertical align */
}

Also, you're missing the closing tag on <div id="cloud">

Upvotes: 5

Related Questions