Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Basics CSS Layout Project Adding Media Queries for Large Screens

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

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

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

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

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

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.