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,004 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
Data Analysis Techdegree Graduate 49,443 PointsHey 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
Data Analysis Techdegree Graduate 49,443 PointsTravis Alstrand
Data Analysis Techdegree Graduate 49,443 PointsIf 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