html - CSS(表格单元格)垂直居中文本在 Firefox 中不起作用

Question

我的文本行从几个单词到一个完整的句子不等。我需要该文本水平居中，最重要的是，垂直居中。

CSS 确实在垂直居中时毫无必要地失败了(来吧伙计们)，但我找到了一个适用于 IE10 和 Chrome 的解决方案，它实际上也适用于 firefox，但 firefox 将 div 向下推到容器下方。

html/css 看起来像:

<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>

在 Chrome 和 IE 上它看起来像:

在 FF 上它看起来像:

编辑: 这是一个显示确切问题的 fiddle 。在 chrome 上查看，然后在 FF 上查看。

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

Answer 1

通过对 CSS 进行以下更改，我能够让它在所有 3 种浏览器中工作:

#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 */
}

此外，您还缺少 <div id="cloud"> 上的结束标记