Вы можете использовать CSS Flexbox.
Сделайте .row
гибким контейнером и используйте свойство 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 -->
Надеется, что это помогает!
Отлично, спасибо! – alexandrepa
@alexandrepa Это мое удовольствие! –