导航菜单中的居中对齐文本答案

【问题标题】：Center-aligning text in nav menus导航菜单中的居中对齐文本
【发布时间】：2013-05-26 15:40:43
【问题描述】：

我是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-heights，直到完美？

另外，顺便说一句，他为什么将他的#menu li as 设置为display:block？

【问题讨论】：

标签： html css alignment centering

【解决方案1】：

以下是细分：

`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】：

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

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

【讨论】：