Html 在引导中垂直对齐而不破坏网格

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

我已经看过很多次了，我自己也用过几次，但是在bootstrap中它打破了bootstrap网格。最后一列“掉到行外”。 我已经尝试按照另一个线程中的建议，将

表布局：fixed

添加到元素（

span

和

img

）

我还用12个

div

s和类

col-lg-1

尝试了同样的方法，得到了相同的结果。最后一列似乎不再适合该行，并且看起来正在创建换行符

有什么想法吗

---

P>欢呼，Beejay

请提供小提琴？你可能想考虑或解决；都是一样的：）反正！您的问题是没有任何东西在水平行中对齐吗？如果是这样，只需将

display:table

更改为

display:inline table

@Hbirjand:我很遗憾，JSFIDLE目前不接受引导类。@pattmorter:太糟糕了，我希望它会这么容易，但结果是一样的。谢谢

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

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