Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

Alinear texto verticalmente

Referente al curso Flexbox: Posicione elementos en la pantalla, en el capítulo Grid principal y limitaciones de Flexbox y actividad Empezando el grid

por Estudiante
| 82.4k xp | 13 posts

Hola, me gustaría saber como le pongo texto verticalmente centrado a cada una de mis box?

Ruby on Rails
Java
HTML
Python
Wordpress
Bootstrap
Java Web
MySQL

.grid{ display: flex; flex-direction: column; height: 50px; width: 75%; flex-wrap: wrap; align-items: center; } .box{ color: white; height: 100px; width: 80px; background-color: green; text-align: center; align-items: center; justify-content: center; }

Imagen de box

2 respuestas
solución!
por Rafaela Rocha
| 2876.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Estudante!

Para alinear texto verticalmente en cada una de tus box, puedes utilizar la propiedad "display: flex" en la clase "box" y establecer la dirección de los ejes con "flex-direction: column". Luego, puedes utilizar la propiedad "justify-content: center" para alinear verticalmente el contenido de cada box.

Tu código quedaría así:

.box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  height: 100px;
  width: 80px;
  background-color: green;
  text-align: center;
}

Espero que esta solución te sea útil. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)
por Estudiante
| 82.4k xp | 13 posts

Muchas gracias!