Bootstrap vertical align a row in a col

问题

I have a code : http://www.bootply.com/8uA4jyGZKB

I would like to vertically center the text and icons at the right of the picture. How can I vertically center the contents of the col-md-10 div ?

回答1:

You can use CSS Flexbox.

Make the .row a flex container and use align-items property to vertically center the content. Just like:

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

Have a look at the snippet below (use full screen for preview):

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

Hope this helps!

来源：https://stackoverflow.com/questions/40577430/bootstrap-vertical-align-a-row-in-a-col

标签

css

twitter-bootstrap

vertical-alignment