标题标签的内容垂直对齐

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/