CSS Project 2b – Centering the menu links

CSS

0 Comments

Now that we know how to size elements, let's use it to center the links in the menu.

CSS changes

#header {
    ...

    height: 40px;
}

#header ul li {
    ...

    /* set to same height as #header */
    line-height: 40px;
}

#menu,
#menu-right {
    ...

    /* This is a new property. See below for details. */
    vertical-align: top;
}

Result

line-height property (Line 11)
By setting line-height to the same height as the header, it will center the link text vertically.
vertical-align property (Line 18)
This property tells how to align the current element vertically with respect to its parent container. We want the top of the menu to touch the top of the header, so we set vertical-align to top. It will then completely fill the header, since they're the same height, and the text will be centered.

Let's next remove the underline on each of the menu links.

Practice in Editor

Leave a Comment