Vertikales Ausrichten in Bootstrap verwenden
Einfaches Problem: Wie kann ich eine Spalte innerhalb einer Spalte mit Bootstrap vertikal ausrichten? Beispiel hier (ich möchte child1a und child1b vertikal ausrichten):
HTML
<div class="col-lg-12">
<div class="col-lg-6 col-md-6 col-12 child1">
<div class="col-12 child1a">Child content 1a</div>
<div class="col-12 child1b">Child content 1b</div>
</div>
<div class="col-lg-6 col-md-6 col-12 child2">
Child content 2<br>
Child content 2<br>
Child content 2<br>
Child content 2<br>
Child content 2<br>
</div>
</div>
UPDATE
Einige CSS:
.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;
}
.child1a, .child1b{
border:4px solid black;
display:inline-block !important;
}
.child1{
border:4px solid blue;
height:300px;
display:table-cell !important;
vertical-align:middle;
}
.child2{
border:4px solid red;
}
51
3
table-layout: fixed
verhindert den Bruch der Funktionalität der col-* Klassen.Für das Elternteil: "Anzeige: Tabelle".
Für das Kind:
Anzeige: table-cell;
Dann fügen Sie
vertical-align: middle;
hinzu.Ich kann eine Fiedel machen, aber jetzt Zeit zu Hause, yay!
OK, hier ist die schöne Fiedel: http://jsfiddle.net/lharby/AJAhR/
Sie meinen, Sie wollen, dass 1b und 1b nebeneinander stehen?