Question

出于某种原因，当应用一种非常常用的技术来垂直居中div中的文本内容时，文本会在某些情况下移出div。

以下是问题示例的链接：http://www.bootply.com/p4oma9jFjX

请注意，示例1和2工作正常，但示例3说明了问题。

CSS

.search-result {
    background: grey;
    height: 200px;
    border-width: 10px;
    border-style: solid;
    border-color: white;
}
.search-result:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.item {
    display: inline-block;
    vertical-align: middle;
}
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px
}

HTML

<div class="col-sm-6 col-xs-12 text-center search-result">
    <div class="item">
        <p class="text-32"><b class="">Example 1</b></p>
        <p class="small hidden-xs"><b class="">Writer(s)</b><br class="">Garry Bonner, Alan Gordon</p>
        <p class="small"><b class="">Made Popular By</b><br class="">The Turtles</p>
    </div>
</div>
<div class="col-sm-6 col-xs-12 text-center search-result">
    <div class="item">
        <p class="text-32"><b class="">Example 2</b></p>
        <p class="small"><b class="">Writer(s)</b><br class="">Harold Faltermeyer</p>
        <p class="small"><b class="">Made Popular By</b><br class="">Harold Faltermeyer, Beverly Hills Cop (Original Motion Picture Soundtrack), Crazy Frog</p>
    </div>
</div>
<div class="col-sm-6 col-xs-12 text-center search-result">
    <div class="item">
        <p class="text-32 text-center"><b class="">Example 3</b></p>
        <p class="small text-center"><b class="">Writer(s)</b><br class="ellipsis">Micayle Mckinney, Rosemarie Tan, Justin Walker, Jonathan James Yip, Jeremy Reeves, Ray Romulus, James Smith, Robin Tadross, Shannon Lawrence</p>
        <p class="small text-center"><b class="">Made Popular By</b><br class="">Danity Kane</p>
    </div>
</div>

Answer 1

这个问题似乎与您拥有:before伪元素height: 100%的事实有关。我建议尝试另一种集中内容的方式：

.search-result {
    background: grey;
    border: 10px solid white;
    display: table;
}
.item {
    height: 200px;
    display: table-cell;
    vertical-align: middle;
}

Vertical-align behaves differently on an element with display: table-cell;.

http://www.bootply.com/5EeJMgZRe7

在http://phrogz.net/css/vertical-align/index.html

了解有关vertical-align的更多信息

Answer 2

进行以下更改

.search-result {
    background: grey;
    height: 200px;
    border-width: 10px;
    border-style: solid;
    border-color: white;
    display: table;/* <==the change */
}

Answer 3

为了记录你正在做的事非常黑客。您可以通过向.item添加宽度修改来获得更好的结果，但实际上您应该遵循以下步骤：Vertically align text in a div

.item{
   width: 99%;
}

Answer 4

如果您打开全屏＆＃34;你可以看到example2中也存在问题。

尝试将position: absolute;添加到search-result:before

.search-result:before {
    content: "";
    display: inline-block;
    height: 100%;
    position: absolute;
    vertical-align: middle;
}

Answer 5

您应该将display: table;和display: table-cell;放在外部和内部div上。

<强> Updated Bootply

代码示例：

.search-result {
    background: grey;
    height: 200px;
    border:solid 10px white;
    display:table; /* add this */
}

.item {
    vertical-align: middle;
    display: table-cell; /* and this */
}

div中的文本在垂直居中对齐时溢出

CSS

HTML

5 个答案: