垂直对齐CSS框内的文本

Question

我想让我的CSS框内的文字在中间垂直对齐。我在div上尝试了valign =“middle”，但它没有用 CSS：

        #leadboard
    {
        width: 1300px;
        height: 100px;
        background-color: #dedede;
    }

HTML：

    <div id="leadboard" align="center">
        <h1>Text Here</h1>
    </div>

Answer 1

如果您的文字是一行 -

#leadboard {
    line-height: 100px; /* Equal to height */
}

如果你的文字是几行 -

#leadboard {
    display: table;
}
#leadboard h1 {
    display: table-cell;
    vertical-align: middle;
}

Answer 2

像这样：

#leadboard
{
    width: 1300px;
    height: 100px;
    background-color: #dedede;
    display: table;
}
#leadboard h1
{
    display: table-cell;    
    vertical-align: middle;
}

或

#leadboard
{
    width: 1300px;
    height: 100px;
    background-color: #dedede;
    line-height: 100px;
}