Question

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

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

Answer 1

您可以使用 CSS Flexbox 。

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

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

希望这有帮助！

Bootstrap垂直对齐col中的一行

1 个答案: