Question

我有一些垂直文本，我不能在它们的div中垂直居中。这是一个例子：http://jsfiddle.net/hThGb/2657/

参见3个div（2个橙色和1个红色）。 div中的文本不是垂直居中的，这使得文本在div之外泄漏。

我尝试使用vertical-align: middle，但这不会做任何事情。

如何将div中的垂直文本垂直居中？

Answer 1

如果您在boxes内的文字可以在一行中，那么您可以使用line-height属性将它们垂直对齐。

使用line-height:(height of the container)

JS Fiddle Demo

Answer 2

有一种方法可以使文本（多行文本）在未知高度的容器中垂直居中。

诀窍是使用100％高度容器的伪内容，设置display:inline-block。您的子元素也必须是display:inline-block;

<强> HTML

<div>
    <p>texts online line</p>
</div>
<div>
    <p>texts will be shown in two lines, lorem ipsum doilor sit amet conse </p>
</div>

<div class="last">
    <p>texts will be shown in three lines, lorem ipsum doilor sit amet conse lorem ipsum dolor sit  </p>
</div>

<强> CSS

div {
    background:#bababa;
    padding:10px;
    width:260px;
    height:100px;
    margin:0 0 10px;
}

.last {
    height:200px;
}

div > p {
    margin:0;
    display:inline-block;
    vertical-align:middle;
    width:100%;
}

div:before {
    content:"";
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0px;
    font:0/0 a;
    margin-left:-4px;
}

Fiddle Demo

如何运作

同一兄弟姐妹中的所有display:inline-block元素都会对CSS的vertical-align属性做出反应;伪元素将占据容器的100％高度，其他元素将对此作出反应！所以你可以在中间或底部或顶部垂直居中。

Answer 3

申请#chat here后，现在可以使用flexbox轻松完成此操作。

Answer 4

你可以使用padding代表那三个div

垂直居中垂直文本

4 个答案: