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 trialjason limmm
8,009 Pointscannot 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
Treehouse Project ReviewerHey 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
Treehouse Project ReviewerTravis Alstrand
Treehouse Project ReviewerIf 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