css - 垂直对齐 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;
}