引导 CSS 对齐

Question

我一直在努力调整工作，但我很难成功。我不确定引导程序中是否已经存在用于垂直对齐的 CSS 样式，但这就是我想要完成的。

我有一个 DIV（.well 类），其中包含图像和一些文本。图像响应良好，因此高度和位置很好。但是，我试图在中间垂直对齐按钮和文本。

这是一个 jsFiddle：http://jsfiddle.net/6z9skpeh/

<div class="col-md-6">
    <div class="well wellFriends">
        <div class="row">
            <div class="col-md-4 friendPic">
                <img src="http://oi62.tinypic.com/289j41s.jpg" class="img-responsive">
            </div>
            <div class="col-md-8 friendDetails">
                <div class="row">
                    <div class="col-md-6"><strong>Bob Smith</strong>
                        <br><em>Department Name</em>
                    </div>
                    <div class="col-md-5 pull-right">
                        <!-- Single button -->
                        <div class="btn-group pull-right">
                            <button type="button" class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" aria-expanded="false">Friends <span class="caret"></span>

                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a>
                                </li>
                                <li><a href="#">Another action</a>
                                </li>
                                <li><a href="#">Something else here</a>
                                </li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我目前所拥有的：

这就是我想要做的：

Answer 1

你可以这样尝试：demo

css：

.v_align {
    font-size: 0;
}
.v_align >[class*="col"] {
    float: none;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}

HTML：

 <div class="row v_align">..</div>