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

时间:2014-08-01 11:41:09

标签: html css twitter-bootstrap twitter-bootstrap-3

我知道这个问题已经有十几个问题,但似乎没有一个问题适合我的情况。由于使用表格进行布局并不是一种好的风格,我尝试了一种不同但类似的方法,这似乎是在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添加到另一个帖子中建议的元素(spanimg)。

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

任何想法?

干杯,Beejay

0 个答案:

没有答案