3

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

查看 3 个 div（2 个橙色和 1 个红色）。div 内的文本不是垂直居中的，导致文本泄漏到 div 之外。

我试过了，vertical-align: middle但这不会做任何事情。

如何在 div 中垂直居中垂直文本？

4

4 回答 4

3

如果您在其中的文本boxes可以在一行中，则可以使用该line-height属性将它们垂直对齐。

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

JS Fiddle Demo

于 2013-10-08T09:43:33.253 回答
0

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

诀窍是使用容器高度为 100% 的伪内容 set 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同胞中的所有元素都会对vertical-alignCSS 的属性做出反应；伪元素将占据容器的 100% 高度，其他元素会对此做出反应！因此，您甚至可以在中间或底部或顶部垂直居中。

于 2013-10-08T10:34:08.670 回答
0

正如#chat 这里所应用的，现在使用 flexbox 很容易做到这一点。

于 2017-07-10T11:00:20.490 回答
-1

你可以使用padding这三个 div

于 2013-10-08T10:00:55.710 回答