html - 垂直居中对齐时，div 中的文本会溢出到外部

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