Question

我是CSS的初学者，我正在尝试了解导航菜单中每个li元素中的文字如何在垂直和水平方向居中。

作为一个例子，我正在看David Appleyard的this particular nav menu：

<!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>

他如何在li元素的中间很好地得到他的li文本？他只是在和padding和line-height一起玩，直到他完美无缺？

另外，在旁注中，为什么他将#menu li a设置为display:block？

Answer 1

是的，它是垂直居中的line-height: 40px。如果文本要包装，这看起来不正确。

锚点为display: block，因此填充应用于块级元素，而不是默认的内联（尝试更改它以查看外观如何变化）。锚点将基本上“填充”它的容器LI元素，该元素被浮动以使事物保持在同一行（而不是“内联”）。

Answer 2

以下是细分：

`display: block;`

他这样做是因为你可以给块框填充。这很好，因为填充包含在链接周围的“可点击”区域中。用户习惯于将菜单项视为“按钮”，因此能够点击不仅仅是文本更好。

View a JSFiddle isolating the padding on an anchor

注意：我只浮动a以防止它延长iframe的整个宽度

水平居中

锚元素的填充是对称的，因此它们看起来是水平居中的。执行此操作的行是padding: 0 20px;。请注意，这些块框不会扩展整个宽度这一事实是因为它们的父项设置为向左浮动。

Here's a JSFiddle isolating this centering effect.

注意：向左浮动的父母是导致所有内容出现在同一行的原因

垂直居中

默认情况下，文本居中于线条的中心。如果你试图在一个包含元素中居中一行，那么一个好用的技巧就是将line-height设置为该元素的高度。在这种情况下，父级设置为height: 40px，因此他匹配该高度。我在此处描述的行是line-height: 40px;

Here's a JSFiddle isolating the vertical centering.

其他可能性

你会看到我在我发布的第一个JSFiddle中水平和垂直居中a。这通常是我使用的方法，但当然，总有不止一种方法可以做。最好的方法可能取决于项目的上下文！

在导航菜单中居中对齐文本

2 个答案:

`display: block;`

水平居中

垂直居中

其他可能性