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
Reuven Kishon
5,270 Points"tea" list element doesn't look to be 50% from bottom of page when setting it's bottom position to 50%
Why is that?
4 Answers
Adam Brown
12,453 PointsIt could be a lot of things. Most likely you never set "position: fixed" or "position: absolute". Without the code, there's no way for anyone to understand what the exact problem is.
Reuven Kishon
5,270 PointsAdam,
Normally I'd agree with you that looking at the code would help, however I forgot to mention that I followed Guil's additions to the CSS in this video, so knowing that should help here.
That said, I figured out the problem, it looks like the bottom of the element that I'm absolutely positioning would be 50% from the bottom of the parent element (in this case the viewport).
Adam Brown
12,453 PointsCan you copy/paste your CSS and HTML codes that you're using? Don't forget to use 3 back-ticks ` on the lines above and below your code.
.tea{
position: absolute;
bottom: 50%;
}
That code by itself should work. Make sure your "tea" element has the class "tea" in the HTML code and make sure your targeting rule has .tea at the beginning, not just tea.
ywang04
6,762 PointsYou already answered your question. :)
Lewis Marshall
22,673 PointsWhen you set it to 'bottom: 50%;' the bottom of the element is hitting the 50% position of the parent or the browser viewport. Whereas when you try 'top: 50%;' the top of the element is hitting the 50% position of the parent or the browser viewport.
Try them both out and you should notice the difference and what part of the element is hitting the 50% position.
Petar Karagenov
8,608 PointsIf you want it to be exactly centered, try adding this:
transform: translateY(50%);
This should move '.tea' 50% of its own height along the Y-axis.