Tengo esta cuadrícula de bootstrap 4 con una fila que tiene una altura de 200px y dos columnas:
How to center this vertically/horizontally This too No estoy seguro de cómo puedo centrar el texto en ambas columnas, tanto vertical como horizontalmente.
Aquí hay un violín: http://jsfiddle.net/x1hphsvb/31/
He visto preguntas y respuestas similares en stackoverflow, pero no pude encontrar una respuesta que realmente funcionó en mi caso.
Entonces, ¿cómo hacer esto?
Usando la última versión (Bootstrap 4 alpha 6).
Utilice la clase align-items-center para centre verticalmente, y text-center para el centro horizontal …
How to center this vertically/horizontally This too
Añádalos como clases a su text-center align-middle .
La documentación para estas clases se puede ver aquí:
Tipografía: https://v4-alpha.getbootstrap.com/utilities/typography/
Alineación vertical: https://v4-alpha.getbootstrap.com/utilities/vertical-align/
Si esto no funciona, alternativamente, puede agregar divisiones alrededor del tramo, darles una clase y dar a las clases los siguientes estilos: http://jsfiddle.net/x1hphsvb/32/
.col-md-10{ height: 200px; } .col-md-2{ height: 200px; } .this-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .that-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
How to center this vertically/horizontally This too
Puede centrar el texto horizontal y verticalmente al centrar los elementos debajo de ambas columnas.
Deberá agregar las siguientes tres clases
d-flex justify-content-center align-items-center
How to center this vertically/horizontally This too
Usar position:relative y position:absolute más transform:translate() .
Cambié col-md a col-xs para que pueda ver el efecto en el fragmento (porque el fragmento es pequeño) .
También agregué height:100% a ambas columnas para que tomaran la altura del elemento principal y se puede ver que el span está centrado horizontal y verticalmente. Esto también se mantendrá alineado incluso cuando cambie el tamaño del navegador
.col-xs-10, .col-xs-2 { position: relative; } .col-xs-10 span { position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); } .col-xs-2 span { position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); }
How to center this vertically/horizontally This too