Bootstrap垂直对齐col中的一行

Question

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

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

Answer 1

您可以使用CSS Flexbox.

创建.row一个flex容器并使用align-itemsproperty将内容垂直居中.就像:

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

看看下面的片段(使用全屏预览):

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 -->

希望这可以帮助!