如何在我的 header 中垂直对齐我的 multi-line p 标签？

Question

我真的很难在 HTML 中将 p 标签垂直居中。我正在尝试按照方法 found here，但我似乎无法让它工作。

.site-header {
    background: #27112e url("/assets/header-bg.png") no-repeat;
    height: 220px;
    position: relative;

    .inner-header {
        font-family: "museo-sans", Avenir, sans-serif;
        margin: auto;
        max-width: 850px;
        min-width: 150px;
        width: 75%;
        display: table;

        .name {
            float: left;
            font-family: "ff-tisa-web-pro", Georgia, serif;
            font-size: 1.8em;
            line-height: 40px;
            margin: 65px 55px 0 0;
            display: table-cell;
            vertical-align: middle;
        }
    }
}

前两个只是div，.name是一个h1。

希望 CSS 足以说明我要完成的任务。我只想要一个可以是多行的 "name" 字符串，无论它显示多少行，它都可以垂直居中。

我做错了什么？

Answer 1

首先将您的 CSS 改写为

.site-header {
    background: #27112e url("/assets/header-bg.png") no-repeat;
    height: 220px;
    position: relative;
}

.inner-header {
    font-family: "museo-sans", Avenir, sans-serif;
    margin: auto;
    max-width: 850px;
    min-width: 150px;
    width: 75%;
    display: table;
}

.name {
    float: left;
    font-family: "ff-tisa-web-pro", Georgia, serif;
    font-size: 1.8em;
    line-height: 40px;
    margin: 65px 55px 0 0;
    display: table-cell;
    vertical-align: middle;
}

我从未见过您的 CSS 代码是可行的。您也可以使用 div.site-header div.inner-header h1.name 或 div.site-header > div.inner-header > h1.name.

改进您的 CSS

最好将您的代码更改为：

<div class="site-header">
    <div class="inner-header">
        <h1 class="name">
    </div>
</div>

正如 ElefantPhace 所说。那么一切都应该更容易。

如何在我的 header 中垂直对齐我的 multi-line p 标签？

How do I vertically align my multi-line p tag in my header?

html

css

sass