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 Joey Frazer
Joey Frazer
Courses Plus Student 129 Points

Having trouble centering navbar text and making it horizontal.

Having trouble centering the text in the center of nav and making it horizontal. Please help:

nav {
    font-family: 'Fredoka One', cursive;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background-color: #3498db
}

nav li {
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
    list-style: none
}

nav li a {
    text-decoration: none;
    color: #34495e;
    transition: all 0.3s ease
}

nav li a:hover {
    color: #fff
}

1 Answer

Sia Hua Jiuh
Sia Hua Jiuh
11,138 Points
Sia Hua Jiuh
Sia Hua Jiuh
11,138 Points

Dear Joey,

Centering navbar text:

    nav {
      display: flex;
      justify-content: center;
      align-items: center;
    }

This will center the text both horizontal and verically regardless the height of nav. If you only want horizontally center, remove "align-items".

Making it horizontal:

    nav li {
        display: inline;
    }

There are different ways to achieve this, however flexbox is the easiest.

Rgds Sia