Bootstrap垂直对齐列中的一行

Question

我有一个代码：http://www.bootply.com/8uA4jyGZKB

我想将图片右侧的文本和图标垂直居中。 如何垂直居中 col-md-10 div 的内容？

Answer 1

您可以使用 CSS Flexbox。

将.row 设为弹性容器并使用align-items 属性将内容垂直居中。就像：

.row {
  display: flex;
  align-items: center;
}

看看下面的 sn-p（使用全屏预览）：

body {
  padding-top: 50px;
}

.row {
  display: flex;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <img id="cover" src="http://cdn-images.deezer.com/images/cover/e19f5a2ec7877377a58b9d1ba22f55e1/120x120-000000-80-0-0.jpg" class="">
        </div>
        <div class="col-md-10">
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-12" contenteditable="false">Justin Bieber</div>
                </div>
                <div class="row">
                    <div class="col-md-12">Baby</div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-2"><span class="glyphicon glyphicon-fast-backward"></span>

                    </div>
                    <div class="col-md-2"><span class="glyphicon glyphicon-play"></span>

                    </div>
                    <div class="col-md-2"><span class="glyphicon glyphicon-fast-forward"></span> 
                    </div>
                    <div class="col-md-2"><span class="glyphicon glyphicon-volume-up"></span>

                    </div>
                    <div class="col-md-2"><span class="glyphicon glyphicon-random"></span>

                    </div>
                    <div class="col-md-2"><span class="glyphicon glyphicon-volume-off"></span>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.container -->

希望这会有所帮助！