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 CSS Layout Basics CSS Layout Project Adding Media Queries for Large Screens

Cole Atkinson
Cole Atkinson
2,854 Points
Posted by Cole Atkinson
Cole Atkinson
2,854 Points

Can't get menu list items to align vertically in the header

Hey guys! I have done the whole assignment to style this page, but I am stuck on vertically aligning the menu items in the header. As you'll see from the attached image, they are sticking to the top of the container as opposed to center aligning with the title.

I have tried making both ul and li inline blocks and then setting the vertical-align property to middle, but something tells me this isn't correct (and it didn't work, obviously).

Let me know if I should post my code in here. For now, here's a screenshot of the div: https://screenshot.click/09-11-cet24-onoef.png

Christopher De Lette
Christopher De Lette
Courses Plus Student 7,139 Points
Christopher De Lette
Christopher De Lette
Courses Plus Student 7,139 Points

Hi Cole,

I believe you are on the right track however without viewing your code it's hard to help pinpoint the problem. Post your code using Markdown another way you feel comfortable posting your code and i'll try to help :)

Chris

Cole Atkinson
Cole Atkinson
2,854 Points
Cole Atkinson
Cole Atkinson
2,854 Points

Thanks Christopher!

Here we go:

<header class="main-header clearfix">
        <h1 class="name"><a href="#">Best City Guide</a></h1>
        <ul class="main-nav">
            <li><a href="#">ice cream</a></li>
            <li><a href="#">donuts</a></li>
            <li><a href="#">tea</a></li>
            <li><a href="#">coffee</a></li>
        </ul>
    </header>


And the CSS:

@media (min-width: 1000px) {

.main-nav {
  display: inline-block;
  float: right;
  vertical-align: middle;
}

.name {
  float: left;
  font-size: 1.25em;
}

li {
  display: inline-block;
  margin-right: 30px;
}

.main-header {
 padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.col {
 float: left; 
}

.secondary {
  width: 30%;
  padding: 0 10px;
}

.primary {
  width: 40%;
  padding: 0 10px;
}

.tertiary {
  width: 30%;
  padding: 0 10px;
}
}

3 Answers

Christopher De Lette
PLUS
Christopher De Lette
Courses Plus Student 7,139 Points
Christopher De Lette
Christopher De Lette
Courses Plus Student 7,139 Points

Btw this is not very common practice anymore now that flexbox and grid layouts are becoming the norm. They can be a bit difficult to grasp conceptually at first but once you use them and practice, practice, practice they make page layout a ton easier. ?

Christopher De Lette
PLUS
Christopher De Lette
Courses Plus Student 7,139 Points
Christopher De Lette
Christopher De Lette
Courses Plus Student 7,139 Points

Try adding a bit more top padding to your main-nav and instead of the vertical align property try the text-align: center property. Let me know if that helps. Can you also post your HTML using Markdown exactly the same way you posted your CSS.

Thanks,

Chris

Gerhard von Kiwa
Gerhard von Kiwa
8,115 Points
Gerhard von Kiwa
Gerhard von Kiwa
8,115 Points

I had huge problems as well with the position of the nav. As Christopher said i added a top padding to the li. It seems it's the only proper way and it looks good in the browser.