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;
}

垂直对齐文本与未知的容器高度

1 个答案: