0

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

例如，我正在查看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>

他如何在元素li中间很好地获得他的文本？li他只是在玩弄paddingand line-heights 直到他完美吗？

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

4

2 回答 2

1

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

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

于 2013-05-30T22:22:19.833 回答
1

这是细分：

display: block;

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

查看一个 JSFiddle 隔离锚点上的填充

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

水平居中

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

这是一个隔离这种居中效果的 JSFiddle。

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

垂直居中

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

这是一个隔离垂直居中的JSFiddle。

其他可能性

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

于 2013-05-30T22:23:47.233 回答