垂直对齐标头标签的内容

Question

我一直在阅读很多关于在CSS中垂直对齐文本的内容。我无法理解为什么它在HTML中如此简单，但它不在CSS中。

无论如何，我的问题是，我有以下几点： 在我的HTML文档中：

<header>
    <h1> My Website </h1>
</header>

在我的CSS样式表中：

header
{
    padding: 0px;
    background-color: BCCCCC;
    color: black;
    font-weight: bold;
    text-align: center;
}

我想知道垂直对齐文本的最简单，最简单的方法，以便它可以移动到标题部分的中间，或者移到标题部分的底部。

如果我的问题已被提出，请告诉我。

谢谢。

Answer 1

为“垂直对齐中心”提供height & line-height相同的header。像这样：

header
{
    padding: 0px;
    background-color: #BCCCCC;
    color: black;
    font-weight: bold;
    text-align: center;
    height:100px;
    line-height:100px;
    background:red;
    display:block;

}

http://jsfiddle.net/3QGqf/

<强>已更新 如果您希望文本位于底部，则可以使用position:absolute或display:table属性。以下是display:table属性的示例。

http://jsfiddle.net/3QGqf/2/