將元素放置在標題的中間

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標簽的位置，即可解決問題！

---

演示：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%;

}

Answer 2

您可以使行高與行高相同

header p {
    line-height: 234px;
}

http://jsfiddle.net/a65tr/3/ *

* 我刪除了一些不需要清除的樣式。 left:0;right0; 當您有width:100%時不需要，一個就足夠了

Answer 3

您瀏覽器的簡單方法是：

header {
display:flex;
flex-direction:column;
text-align:center;
height:250px;
}
header p {
margin:auto;
}

演示 http://jsfiddle.net/a65tr/6/絕對

---

或http://jsfiddle.net/a65tr/7/

<!--language:css-->
header {
display:table;
width:100%;
height:250px;
text-align:center;
}
header p {
display:table-cell;
vertical-align:middle;
}

Answer 4

嘗試這個：

header p{
 width:100%;
 margin-top:auto;
 margin-bottom:auto;
}