como se puede alinear de forma vertical? Yo uso display flex <code>display: flex; align-content: center; </code> Me gustaria conocer otra...

Nicoll Idaly Angulo Mejia

Nicoll Idaly Angulo Mejia

Pregunta
studenthace 4 años

como se puede alinear de forma vertical?

Yo uso display flex

display: flex; align-content: center;

Me gustaria conocer otras maneras

8 respuestas
para escribir tu comentario
    Carlos Eduardo Gomez García

    Carlos Eduardo Gomez García

    teacherhace 4 años

    ¡Hola, Mauricio!, siempre es bueno complementar lo que aprendes cada clase con los aportes de esos estudiantes (por eso se llaman aportes), claro que siempre suelen ser muchos aportes, el objetivo es encontrar ese equilibrio en cuando dejar de verlos.

    Hay estudiantes que pondrán otros aportes que irán más allá del curso, depende de ti el querer verlo, la escuela de desarrollo web te enseñará todo lo que necesitas, pero siempre es bueno complementar con otras cosas, por ejemplo, algunos aportes que encuentres en algunas clases verás que hacen referencia a otros cursos de Platzi (como el Curso de Diseño Web con CSS Grid y Flexbox).

    El asunto es que continúes con los cursos y trates de aprender (y practicar) lo más que puedas :D

    Mauricio Doncel

    Mauricio Doncel

    studenthace 4 años

    Hola. RetaxMaster. Disculpa veo que tienes un puntaje difícil de ignorar y lograr por eso quisiera preguntarte algunas cosas.

    1. ¿El tema que dejas en tu tutorial son temas que se van a ver a lo largo del curso ó escuela? Agradezco tu aporte pero veras a veces leo tantos aportes tratando de aprender que suman bastante tiempo video tras video. Y pues no quisiera malgastar el tiempo de suscripción.
    2. ¿Según tu experiencia debería fijarme solo en los aportes directamente relacionados con los videos ó también en aportes como por ejemplo que también existen float y después Flexbox y Grid en CSS pues sería salir de la plataforma para investigar o buscar otras líneas ó solo los dejo anotados para a lo mejor después de terminar el curso consultar toda esta información? Agradezco por tu atención y respuesta
    Carlos Eduardo Gomez García

    Carlos Eduardo Gomez García

    teacherhace 4 años

    Adicionalmente a todo lo que ya te comentaron, que son buenas formas de hacerlo, quiero decirte que la mejor forma de alinear cosas de manera vertical es con Flexbox, antes de Flexbox no había una manera fácil porque no teníamos forma de maquetar cosas de manera sencilla, tanto así que teníamos que recurrir a "hacks" de CSS.

    Es por ello que Flexbox es un alivio, porque con él podemos hacer cosas increíbles como alinear cosas de forma vertical de una forma muy fácil.

    Te invito a leer mi tutorial donde explico esto de una forma más amplia:

    Organiza fácilmente tu layout con Flexbox 😉

    De igual manera, otra forma mágica de alinear elementos en con CSS Grid, así que cuando llegues ahí verás lo fácil que es hacer sitios web con esto jaja

    Joseph Medina

    Joseph Medina

    studenthace 4 años

    display: flex; flex-direction: column;

    Francisco Ponce

    Francisco Ponce

    studenthace 4 años

    Hint: Si quieres probar el código recuerda eliminar los comentarios hechos en diagonal

    ///

    Francisco Ponce

    Francisco Ponce

    studenthace 4 años

    Hola Nicoll,

    Para alinear pocos elemento, la opción que muestras es bastante válida.

    Otra forma de alinear verticalmente un elemento es el clásico y un poco complicado posicionamiento absoluto y relativo.

    .container{ position: relative; //contenedor padre width:20rem; height: 20rem; border: 3px solid blue; margin: auto; } .element{ position:absolute; // elemento hijo background: tomato; width: 5rem; height: 5rem; position: absolute; top: 70%; // El top es el que hace la magia ;) left: 50%; // Centrar nuestro elemento y que no se vea descuadrado transform: translate(-50%, -50%); }
    <div class="container"> <div class="element"></div> </div>

    Te comparto este recurso Link para más ejemplos

    Josué David Coreas Paiz

    Josué David Coreas Paiz

    studenthace 4 años

    Hola Nicoll te comparto este link que es utilizando position: absolute , pero claro utilizando flexbox es más fácil.

    Julián Ramírez

    Julián Ramírez

    studenthace 4 años

    ¡Hola Nicol! Esto depende de si a qué se lo quieras aplicar. Existe el

    text-align: center;
    para texto, el famoso
    margin: 0 auto;
    que centra el contenido tanto vertical como horizontalmente en contenedores con display block, flex, etc, e incluso existe la propiedad vertical-align. Todo esto lo irás aprendiendo a medida de los cursos y haciendo proyectos pero lo que es más importante es que vas a entender cuándo necesitas cada propiedad según a lo que se lo quieras aplicar como dije al inicio, espero te haya servido :D.

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.

Curso de HTML y CSS [Empieza Gratis]
Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.