html - 垂直对齐具有未知容器高度的文本

Question

我正在为当前元素使用 bootstrap 3，但在垂直对齐某些文本时遇到问题。

这是 HTML 标记:

<div class="row overview-item">
            <div class="col-sm-3">
                <div class="overview-item-header">
                    <h3>Web design</h3>
                </div>
            </div>
            <div class="col-sm-9">
                <div class="overview-item-desc">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                </div>
            </div>
        </div>

这是 CSS 标记:

.overview-item{
    margin-top:25px;
    margin-bottom:25px;
}
.overview-item-header{
    display: table;
    width: 100%;
}

.overview-item-header h3{
    display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.overview-item-desc{
    color:#ffffff;
    background-color:#337ab7;
    padding:25px;
}

这是输出的屏幕截图:http://i.imgur.com/JtqIlZR.png

第 3 列中的文本需要与蓝色框位于中间(垂直)。问题主要是随着窗口大小的调整，蓝色框的尺寸变大了。将不胜感激有关如何解决此问题的任何建议。

Answer 1

第一个答案，here , 可能会很有趣

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

CSS:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}