html - 在 div 元素中居中 H2

Question

我想将 h2 居中在 #top 内，但vertical-align:middle不起作用......我不知道该怎么做！

#top {
    display: block;
    position: relative;
    height: 100px;
    background-color: rgba(89,144,222,.6);
}
#top h2{
    text-shadow: 2px 2px black;
    text-align: center;
    color: white;
    font-family:"Impact";
    font-size: 50px;
}

效果是 - http://puu.sh/2mz5M

Answer 1

我明白了，您为 div 定义了高度，这非常适合这种情况。你可以这样做：

#top h2{
    text-shadow: 2px 2px black;
    text-align: center;
    color: white;
    font-family:"Impact";
    font-size: 50px;
    line-height: 100px;
}

Answer 2

如果您设置 div 的 line-height，它应该可以工作。请参阅此处的方法 2：

http://phrogz.net/css/vertical-align/index.html

Answer 3

为垂直对齐和 text-align: center 提供固定的高度和行高以使文本居中。

#top {
    position: relative;
    height: 100px;
    line-height: 100px;
    background-color: rgba(89,144,222,.6);
}

    #top h2{
        text-shadow: 2px 2px black;
        text-align: center;
        color: white;
        font-family:"Impact";
        font-size: 50px;
    }

jsfiddle：http: //jsfiddle.net/XvFCT/