können Sie CSS Flexbox verwenden.
Machen Sie die .row
einen flexiblen Container und verwenden Sie align-items
Eigenschaft, um den Inhalt vertikal zu zentrieren. Genau wie:
.row {
display: flex;
align-items: center;
}
Werfen Sie einen Blick auf das Snippet unten (Verwendung Vollbild für die Vorschau):
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 -->
hoffe, das hilft!
Es ist perfekt danke! – alexandrepa
@alexandrepa Es ist mir eine Freude! –