Question

所以，我只是一个初学者。我设法将我的div水平居中，其中包含3个paraphraphs：

div p {
text-align: right;
margin-right: 50%;
color: white;
}

如何让它们垂直对齐，文字对齐？ Pic相关。

http://imgur.com/6ebKRMp

<div class="imperio">
        <p>Império<br>
        dos<br>
        Sabores</p>
</div>

Answer 1

div p {
text-align: center;
color: white;
}

Answer 2

您需要为div容器使用样式，使其垂直居中对齐。

这是working jsfiddle example。

顺便说一下，你真的应该使用text-align: center而不是你当前的造型来使它横向居中。

Answer 3

您可以通过将 div 设为 flexbox 来实现。 align-items CSS 属性将元素水平居中，justify-content 将元素垂直居中。现在 flex-direction 是 column。但如果将其更改为 row，justify-content 和 align-items 的行为将互换。

我知道你说过你只是一个初学者，到目前为止 flexbox 对你来说可能太多了，但是你总是可以记住这四个属性来在一个部门内垂直和水平地居中。稍后您可以深入了解 flexbox。但如果您想试一试，请参阅this。

div {
    width: 500px;
    min-height: 100vh;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

div p {
    text-align: right;
}

<div>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem gravida, pretium erat a, aliquet lorem. Maecenas hendrerit suscipit augue blandit iaculis.  
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem gravida, pretium erat a, aliquet lorem. Maecenas hendrerit suscipit augue blandit iaculis.  
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem gravida, pretium erat a, aliquet lorem. Maecenas hendrerit suscipit augue blandit iaculis.  
    </p>
</div>

垂直居中3段用css

3 个答案: