bootstrap-4 - texto - centrar verticalmente bootstrap
Alineación vertical en Bootstrap 4 (1)
Tengo la siguiente configuración en Bootstrap 4: enlace de arranque
El elemento con el texto "Proveedor" debe estar centrado verticalmente, tengo diferentes filas con el mismo código y quiero que estén centradas. Ninguna solución parece funcionar para mí.
¿Puede alguien encontrar lo que hice mal y señalarme en la dirección correcta?
Gracias.
Puede usar la clase
flex-xs-middle
esta manera ...
Bootstrap 4 Alpha 5
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="circle-medium backgrounds"></div>
</div>
<div class="col-xs-6 flex-xs-middle">
<div class="name">Supplier</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="circle-medium backgrounds"></div>
</div>
<div class="col-xs-6 flex-xs-middle">
<div class="name">Supplier</div>
</div>
</div>
</div>
http://www.codeply.com/go/PNNaNCB4T5 (Uso del CSS habilitado para Bootstrap 4 flexbox)
Bootstrap 4
ACTUALIZACIÓN para Bootstrap 4.0.0
Ahora que Bootstrap 4 es flexbox de manera predeterminada, existen muchos enfoques diferentes para la alineación vertical: auto-margins , utilidades de flexbox o utilidades de visualización junto con utilidades de alineación vertical . Al principio, "utilidades de alineación vertical" parece obvio, pero estas solo funcionan con elementos de visualización en línea y de tabla. A continuación se encuentran las opciones de centrado vertical Bootstrap 4. Recuerde, la alineación vertical es relativa a la altura del padre .
1 - Centro vertical usando márgenes automáticos:
Otra forma de centrar verticalmente es usar
my-auto
.
Esto centrará el elemento dentro de su contenedor.
Por ejemplo,
h-100
hace que la fila tenga altura completa, y
my-auto
centrará verticalmente la
col-sm-12
.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Centro vertical con demostración de márgenes automáticos
my-auto
representa márgenes en el eje vertical y y es equivalente a:
margin-top: auto;
margin-bottom: auto;
2 - Centro vertical con Flexbox:
Dado que Bootstrap 4
.row
ahora se
display:flex
, simplemente puede usar
align-self-center
en cualquier columna para centrarla verticalmente ...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
o use
align-items-center
en todo el
.row
para alinear verticalmente todos los
col-*
en la fila ...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Demostración de columnas de altura vertical de centro vertical
Importante : ¡El elemento primario directo del elemento a alinear debe tener una altura definida !
3 - Centro vertical usando las utilidades de pantalla:
Bootstrap 4 tiene
utilidades de visualización
que se pueden usar para
display:table
,
display:table-cell
,
display:inline
, etc. Estos se pueden usar con las
utilidades de alineación vertical
para alinear elementos de celda en línea, bloque en línea o de tabla.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>