javascript - 将一个元素放在标题中间

Question

如何让它在 Firefox 中运行？我希望 p 元素垂直放置在 header 的中间。

header 需要保持绝对定位

http://jsfiddle.net/a65tr/

html

<header>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
</header>

CSS

header {
    color: #3B4043;
    font-family: 'source_sans_prolight',sans-serif;
    font-size: 36px;
    height: 234px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    width: 100%;
    background: green;
}

header p {
    bottom: 0;
    display: inline-table;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

Answer 1

用vertical-align居中，去掉p标签的位置问题就解决了!

---

DEMO : jsfiddle

在这里试试这个 css 代码:

header {
    color: #3B4043;
    font-family: 'source_sans_prolight',sans-serif;
    font-size: 36px;
    height: 234px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    width: 100%;
    background: green;
    display:table;
}

header p {
    bottom: 0;
display:table-cell; 
    vertical-align:middle;
    left: 0;
    margin: auto;
    right: 0;
    width: 100%;

}