Question

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

header需要保持绝对的位置

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

}

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

绝对

DEMO 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;
}

将元素放在标题的中间

4 个答案:

DEMO : jsfiddle