使用内联块技巧与Bootstrap3垂直对齐

Question

考虑以下示例：http://jsfiddle.net/xExxp/1/

<div class="container">
    <div class="row">
        <div class="col-xs-12  col-md-4">
            <img src='http://upload.wikimedia.org/wikipedia/en/2/2b/Small-logo.jpg' />
        </div>
        <div class="col-xs-12  col-md-8 vcenter">BAR</div>
    </div>
</div>

我有CSS：

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

似乎没有用，有什么想法吗？

Answer 1

如果上面的图片是您要查找的输出：

CSS：

.headerrow{
 display: table;   
}

.logoimage{
 display: table-cell;   
}
.vcenter {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

HTML：

<div class="container">
    <div class="row headerrow">
        <div class="col-xs-12  col-md-4 logoimage">
            <img src='http://upload.wikimedia.org/wikipedia/en/2/2b/Small-logo.jpg' />
        </div>
        <div class="col-xs-12  col-md-8 vcenter">BAR</div>
    </div>
</div>

Answer 2

我知道这是一个古老的问题，但是对于在此登陆的其他人来说，这篇文章https://stackoverflow.com/a/20548578/10075027

应该会有所帮助

您必须将.vcenter类同时应用于两个.col-元素，在某些情况下，您还必须使用<!-- -->（您可以使用其他类型的注释，它仅用于空白处在这些元素之间）

以下是使用.vcenter类的示例

<div class="container">
    <div class="row">
        <div class="col-xs-12  col-md-4 vcenter">
            <img src='http://upload.wikimedia.org/wikipedia/en/2/2b/Small-logo.jpg' />
        </div><!--
        --><div class="col-xs-12  col-md-8 vcenter">BAR</div>
    </div>
</div>