在div内垂直对齐一段文本。

Question

我见过很多关于如何做这件事的抱怨，但没有一个是为我工作的。我试图将我的名字放在一个div (标识为".banner")中。

以下是代码：

//html///////////////////////////////////
<div class="banner">
    <p>Jake Demian_</p>
</div>


//css////////////////////////////////////
.banner
{
    width: 100%;
    height: 400px;
    background-color: #e8bc23;
    text-align: center;
}

.banner p
{
    display: inline-block;
    font-family: "courier new";
    margin: 0 0;
    height: 100%;
    vertical-align: middle;
}

jsfiddle链接：联动

很抱歉提供了最起码的信息。我试过inline-block，vertical-align: middle，height 100%，margin: auto的每一个组合。

Answer 1

试着添加：

top:45%;
position:relative;

敬.banner p。

您也可以尝试添加：

display: table;

致.banner和

display: table-cell;

敬.banner p。

JSFiddle：http://jsfiddle.net/BTjr7/2/