CODEWITHSUNDEEP
htmlcssalignmentcentering
mrwnt10
mrwnt10

Reputation: 1415

Center-aligning text in nav menus

I'm a beginner at CSS and am trying to understand how the text in each li element in a nav menu can be centered, both vertically and horizontally.

As an example, I am looking at this particular nav menu from David Appleyard:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CSS Menu</title>
        <style type="text/css">
            body {
                padding: 50px;
            }
            /* The CSS Code for the menu starts here */
            #menu {
                font-family: Arial, sans-serif;
                font-weight: bold;
                text-transform: uppercase;
                margin: 50px 0;
                padding: 0;
                list-style-type: none;
                background-color: #eee;
                font-size: 13px;
                height: 40px;
                border-top: 2px solid #eee;
                border-bottom: 2px solid #ccc;
            }
            #menu li {
                float: left;
                margin: 0;              
            }
            #menu li a {
                text-decoration: none;
                display: block;
                padding: 0 20px;
                line-height: 40px;
                color: #666;
            }
            #menu li a:hover, #menu li.active a {
                background-color: #f5f5f5;
                border-bottom: 2px solid #DDD;
                color: #999;
            }
            #menu_wrapper ul {margin-left: 12px;}
            #menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
            #menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}

        </style>
    </head>
    <body>
        <!-- Grey Menu -->
        <div id="menu_wrapper" class="grey">
            <div class="left"></div>
            <ul id="menu">
                <li><a href="#">Home</a></li>
                <li class="active"><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </body>
</html>

How is he getting his li text nicely in the middle of the li elements? Is he just playing around with padding and line-heights until he gets it perfect?

Also, on a side note, why does he set his #menu li as to display:block?

Upvotes: 0

Views: 169

Answers (2)

jamesplease
jamesplease

Reputation: 12869

Here's the breakdown:

display: block;

He's doing this because you can give block boxes padding. This is nice because padding is included in the 'clickable' area around the link. Users are accustomed to thinking of menu items as 'buttons,' so it's nice to be able to click more than just the text.

View a JSFiddle isolating the padding on an anchor

Note: I only floated the a to keep it from extending the entire width of the iframe

Centering horizontally

The padding of the anchor elements is symmetrical, so they're appearing to be centered horizontally. The line that does this is padding: 0 20px;. Note that the fact that these block boxes don't extend the full width is because their parents are set to float left.

Here's a JSFiddle isolating this centering effect.

Note: The parents being floated left is what causes everything to appear on the same line

Centering vertical

Text is centered, by default, about the center of the line. If you're trying to center a single line within a containing element, a nifty trick is to just set the line-height to be the height of that element. In this case, the parent is set to be height: 40px so he's matching that height. The line that does what I've described here is line-height: 40px;

Here's a JSFiddle isolating the vertical centering.

Other possibilities

You'll see that I centered the a horizontally and vertically in the very first JSFiddle I posted. That's usually the method I use, but of course, there's always more than one way to do things. The best method is probably dependent on the context of your project!

Upvotes: 1

landons
landons

Reputation: 9547

Yes, it's the line-height: 40px that centers vertically. This won't look right if the text were ever to wrap.

Anchors are display: block so that padding is applied to a block-level element, rather than the default inline (try changing it to see how the appearance changes). The anchor will essentially "fill" it's container LI element, which is floated to keep things on the same line (while not "inline").

Upvotes: 1

Related Questions