Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

jason limmm
jason limmm
7,791 Points
Posted by jason limmm
jason limmm
7,791 Points

cannot move flex container down

<html>
    <head>
        <title>Math Exercise Menu</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">
            <button id="easy">Easy</button>
            <button id="Medium">Medium</button>
            <button id="hard">Hard</button>
        </div>
    </body>
</html>

.flex{
    display:flex;
}
#selectbuttoncontainer{
    border:solid black 10px;
    margin:auto 0;
    flex-direction: row;
}
#selectbuttoncontainer button{
    font-size: 8rem;
    width:500px;
    height:500px;
    margin:0 calc(105px/2);
}

i cannot seem to move the flex container down(#selectbuttoncontainer)

1 Answer

Travis Alstrand
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 49,443 Points
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 49,443 Points

Hey jason limmm

Using margin: auto to try and vertically align something is very strange and never really works out the way I want. The easiest way I know of is to target the container's parent element, body in this situation.

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

This sets the body as a flex container as well and will vertically align the child container since body is taking up 100% of the page's height 👍

Travis Alstrand
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 49,443 Points
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 49,443 Points

If you're not trying to center it, and just move it down a little bit, I'd adjust the container's top margin to a fixed amount. For example

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