Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

CSS

Publicado por jason limmm
jason limmm
8,009 puntos

no puedo mover el contenedor flex hacia abajo

<html>
    <head>
        <title>Menú de Ejercicio de Matemáticas</title>
        <link rel=stylesheet href=https://necolas.github.io/normalize.css/8.0.1/normalize.css>
        <link rel=stylesheet href=menustyles.css>
    </head>
    <body>
        <div id=selectbuttoncontainer class=flex>
            <botón id=fácil>Fácil</botón>
            <botón id=Mediano>Medio</botón>
            <botón id=difícil>Difícil</botón>
        </div>
    </body>
</html>

.flex{
    mostrar:flex;
}
#selectbuttoncontainer{
    border:solid black 10px;
    margen:automático 0;
    flex-direction: row;
}
#selectbuttoncontainer botón{
    font-size: 8rem;
    ancho:500px;
    alto:500px;
    margen:0 calc(105pxexpresiones2);
}

no puedo mover el contenedor flex hacia abajo(#selectbuttoncontainer)

1 Respuesta

Travis Alstrand
sello-máscara
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Revisor de Proyectos Treehouse
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Revisor de Proyectos Treehouse

Hola jason limmm

Usar margin: auto intentar alinear algo verticalmente es muy extraño y nunca realmente funciona de la manera que quiero. La forma más fácil que conozco es dirigirse al elemento principal del contenedor, body en esta situación.

body {
  mostrar: flex;
  align-items: center;
}

Esto establece el body como un contenedor flex también y alineará verticalmente el contenedor secundario ya que el cuerpo ocupa el 100% de la altura de la página 👍

Travis Alstrand
sello-máscara
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Revisor de Proyectos Treehouse
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Revisor de Proyectos Treehouse

Si no estás tratando de centrarlo, y solo quieres moverlo hacia abajo un poco, ajustaría el margen superior del contenedor a una cantidad fija. Por ejemplo

#selectbuttoncontainer{
    border: solid black 10px;
    margin-top: 100px;
    flex-direction: row;
}