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