Bootstrap: Wie die Schaltflächengruppe in der Mitte (vertikal)

Im folgenden Code auszurichten:Bootstrap: Wie die Schaltflächengruppe in der Mitte (vertikal)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
\t <div class="col-lg-12"> 
 
\t \t <div class="panel panel-primary"> 
 
\t \t \t <div class="panel-heading"><h2>Element Selection</h2></div> 
 
\t \t \t <div class="panel-body"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-lg-5"> 
 
\t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t <h3><span class="label label-info">Element Segment</span></h3> 
 
\t \t \t \t \t \t \t <textarea class="form-control" rows="8"></textarea> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-lg-2 text-center" > 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <div class="btn-group-vertical"> 
 
\t \t \t \t \t \t \t <button type="button" class="btn btn-primary">>></button> 
 
\t \t \t \t \t \t \t <button type="button" class="btn btn-primary"><<</button> 
 
\t \t \t \t \t \t \t <button type="button" class="btn btn-primary">ALL>></button> 
 
\t \t \t \t \t \t \t <button type="button" class="btn btn-primary"><< ALL</button> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-lg-5"> 
 
\t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t <h3><span class="label label-success">Element Segment</span></h3> 
 
\t \t \t \t \t \t \t <textarea class="form-control" rows="8"></textarea> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 
</div> 
 
</div>

jetzt ist das Ergebnis unten:

so kann ich Ich lege die Knopfgruppe vertikal in die mittlere Position. Ich suchte und versuchte vertical-align: middle, aber es hat nicht für mich funktioniert.

Quelle

2016-05-06 Chris Bao

Überprüfen Sie hier: http://stackoverflow.com/ques/20547819/vertical-align-with-bootstrap-3 – vaso123

Wenn Sie in der Lage sind, dieser Zeile eine ID zu geben, würde ich so etwas tun: http://www.bootply.com/87KkKmPmqK – Pete

Sie Flexbox können mit Medien fragt DEMO (1200px ist für .col-lg-)

@media(min-width: 1200px) { 
    .flex-row { 
    display: flex; 
    align-items: center; 
    } 
}

Quelle

2016-05-06 13:00:32

Antwort bereits von @Nenad Vracar geschrieben, aber Sie können auch diese

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

DEMO HERE

versuchen

Quelle

2016-05-06 13:04:52

Bootstrap: Wie die Schaltflächengruppe in der Mitte (vertikal)

Antwort

Verwandte Themen