Problema simple: ¿Cómo puedo alinear verticalmente un col dentro de otro col usando bootstrap? Ejemplo aquí (quiero alinear verticalmente child1a y child1b):
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>
ACTUALIZACIÓN
Algunos 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;
}
.parent {
display: table;
table-layout: fixed;
}
.child {
display:table-cell;
vertical-align:middle;
text-align:center;
}
La función table-layout: fixed
evita que se rompa la funcionalidad de las clases col-*.
Para el padre: display: table;
Para el hijo: display: table-cell;
A continuación, añada "alineación vertical: central".
¡Puedo hacer un chanchullo, pero el tiempo en casa ahora, yay!
OK aquí está el hermoso violín:
.parent {
display:table;
}
.child {
display:table-cell;
vertical-align:middle;
text-align:center;
}
¿Quieres decir que quieres que 1b y 1b estén juntos?
<div class="col-lg-6 col-md-6 col-12 child1">
<div class="col-6 child1a">Child content 1a</div>
<div class="col-6 child1b">Child content 1b</div>
</div>