¿Cómo puedo centrar un elemento (en este caso texto) de manera vertical? Actualmente solo estoy usando <em>text-align: center;</em>

Julián Ramírez

Julián Ramírez

Pregunta
studenthace 5 años

¿Cómo puedo centrar un elemento (en este caso texto) de manera vertical? Actualmente solo estoy usando text-align: center;

3 respuestas
para escribir tu comentario
    Julián Ramírez

    Julián Ramírez

    studenthace 5 años

    Hola, muchas gracias a ambos por responder. Tengo problemas con ambas soluciones. Screenshot_3.png Al usar align-items: center; en el grid item sí se centra pero el tamaño se limita a mostrar el contenido que está dentro: Screenshot_4.png Lo otro es al poner display: grid; y display: flex; al contenedor principal obviamente se sobrescribe y no puedo manejar el contenido cómo me gustaría. Les agradezco si conocen algún artículo o video que me pueda ayudar a entender mejor este tema para manejo de texto, imágenes y demás haciendo el layout con Grid. Por ahora me sirvió poner display: grid; al grid item y la propiedad text-align: center para centrar horizontalmente y align-items: center; para hacerlo de manera vertical. De antemano muchas gracias :D.

    Mauricio Moreno Morales

    Mauricio Moreno Morales

    studenthace 5 años

    Sí el display flex es el por defecto (que también es row), la forma de centrarlo sería con align-items, pero si el display flex es column, entonces sería con justify-content

    Sneyder Barreto

    Sneyder Barreto

    studenthace 5 años

    ¡Hola! Puedes usar la propiedad

    align-items: center;
    para centrar verticalmente elementos dentro de un grid container. Sin embargo, si usas esta propiedad con el código de la clase, no afectará al texto. Si quisieras posicionar el texto con esta propiedad, tendrías que agregarle un
    display: grid;
    al grid item. Un saludo.

Curso de CSS Grid Layout 2017

Curso de CSS Grid Layout 2017

El módulo CSS Grid Layout nos permite generar distribuciones del contenido en nuestros sitios web de forma eficiente. Controla esta estructura bidimensional de filas y columnas con propiedades de CSS. Crea layouts increíbles de manera fácil, rápida y sin repetir código.

Curso de CSS Grid Layout 2017
Curso de CSS Grid Layout 2017

Curso de CSS Grid Layout 2017

El módulo CSS Grid Layout nos permite generar distribuciones del contenido en nuestros sitios web de forma eficiente. Controla esta estructura bidimensional de filas y columnas con propiedades de CSS. Crea layouts increíbles de manera fácil, rápida y sin repetir código.