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

Posted by Gemma Weirs
Gemma Weirs
15,054 Points

Why isn't the nav vertically centred like Nick's?

I've followed all the steps. But the nav isn't vertically centred like Nick's is.

See screenshot.

main.css

/*=========================
== NAVIGATION =============
=========================*/

nav {
  text-align:center;
  padding:10px 0;
  margin:20px 0 0 ;
}

nav li { display:inline-block; }

nav a { 
  font-weight:800;
  padding:15px 10px; 
}

responsive.css

@media screen and (min-width: 660px) {

  /*=========================
  == MASTHEAD ===============
  =========================*/

  nav {
    background:none;
    float:right;
    font-size:1.125em;
    margin-right:5%;
    text-align:right;
    width:45%;
  }

  #logo {
    float:left;
    margin-left:5%;
    text-align:left;
    width:45%;
  }

  h1 { font-size:2.5em; }

  h2 {
    font-size:0.825em;
    margin-bottom:20px;
  }

  header {
    border-bottom:5px solid #599a68;
    margin-bottom:60px;
  }
}

This is from the How To Make A Website course. If you go to treehousewebsite.com and compare what you see with what is shown in my screenshot, you'll see what I mean. https://www.dropbox.com/s/b5vzfcqija0j7qy/Screenshot%202017-02-06%2005.47.54.png?dl=0

As far as I can see, the margins, paddings, etc are the same as what Nick typed, so why isn't my nav vertically centred like his is?

TIA.

3 Answers

Kyle Jensen
Kyle Jensen
Courses Plus Student 6,293 Points

I know you said you solved it, but here are some ways you can do it. It is one of the pains of designing a site and a common issue, as Craig has mentioned.

There are many ways to accomplish centering vertically in an element.
First things first, check your element. Open the page in the browser and inspect the element itself inside the console. There might be some styling on the element you didn't intend that's keeping its position on the document outside of your target. If there are no unintended stylings, inherited or otherwise, that need to be reversed, then you can do one of the following.

  1. You can set a height of the parent element and use margins to center a single line. It also works with multiple lines, but it takes a bit more math. Make sure to set your fonts size so you know what you are working with>> 
/* 
Example: parent element height is 100px
child CSS is: font 16px, padding is 3px top and bottom, 1px border and no margins. sum of these is 20px
 100px parent
- 20px child
------
  80px = margin height /2 aka 40px top and 40px bottom. 
*/

For single lines you can also set the height of the parent element then set the parent elements line-height equal to its height and that will center a single line child element vertically in the parent element. /* for options one and two you have to watch out for your breakpoints and reset the parent element to accommodate in your media queries. */

You can use flex-box and center it vertically that way. Simple, but if you haven't worked with flex-box yet, it has a bit of a learning curve.

This is not well received in the community, but you can display: table-cell; on the child and then vertical-align it.

I would highly recommend Chris Coyier's CSS-tricks.com. It's an invaluable extra resource for learning CSS.

Gemma Weirs
Gemma Weirs
15,054 Points

Thank you. :) It took a little while but I eventually found the missing rule. I'll keep in mind all that you've said. :)

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Gemma,

I have come across lots of question on this topic so I put together the full site and hosted it on GitHub for students to compare their code.

https://github.com/rokkitpress/Treehouse_How_To_Make_A_Website/tree/master/css

If you look in the relevant files you will be able to see any differences between your code and that of the course.

There is also a live example here:

http://rokkitpress.github.io/Treehouse_How_To_Make_A_Website/index.html

Hope this helps you debug your code.

Craig :)

Gemma Weirs
Gemma Weirs
15,054 Points

Thanks! :) Solved, I was missing the nav ul rule.

Kyle Jensen
PLUS
Kyle Jensen
Courses Plus Student 6,293 Points
Kyle Jensen
Kyle Jensen
Courses Plus Student 6,293 Points

You're very welcome. Let me know if you need any other help!