Question

我知道这个问题已经有十几个问题，但似乎没有一个问题适合我的情况。由于使用表格进行布局并不是一种好的风格，我尝试了一种不同但类似的方法，这似乎是在div中垂直对齐内容的常用方法。我使用标准的自举网格，里面有行和列。

<div class="row" style="height: 100px";>
    <div class="col-lg-1 valign">
        <img />
    </div>
    <div class="col-lg-6 valign">
        <span />
    </div>
    <div class="col-lg-5 valign">
        <span />
    </div>
</div>

我的css看起来像这样：

.valign
{
    display: table;
    height: 100%;
}

.valign > img, .valign > span
{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

我已经看过很多次使用它了，我自己已经使用了几次，但是在bootstrap中它打破了自举网格。最后一栏＆＃39;不属于行＃39; 我已经尝试将table-layout: fixed添加到另一个帖子中建议的元素（span和img）。

我也尝试过12个div和类col-lg-1同样的结果。最后一列似乎不再适合行了，看起来正在创建换行符。

任何想法？

干杯，Beejay

在引导程序中垂直对齐而不会破坏网格

0 个答案: