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足以说清楚我想要完成的事情。我只想要一个名字＆＃34;字符串，无论它显示多少行，都可以是多行长度垂直居中。

我做错了什么？

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所说。然后一切都应该更容易。

如何在我的标题中垂直对齐我的多行p标记？

1 个答案: