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 上看起来像：

编辑：这是一个显示确切问题的小提琴。在 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">