Question

我是新手，试图创建自己的网站。我在页面顶部有一个菜单栏，我希望菜单项居中而不是左对齐。请注意：我正试图集中两件事。第一个是菜单项中的文本，第二个是整组菜单项。

我的菜单条形码在这里：

<ul id="nav">
<li id="nav-home"><a href="http://www.martyversusaig.com">Home</a></li>
<li id="nav-about"><a href="http://www.websitegoodies.com/guestbook.php?a=view&amp;id=1045057" target="&rdquo;_blank&rdquo;">Your Story</a></li>
<li id="nav-archive"><a href="http://www.martyversusaig.com/fllaw.html">Florida Law</a></li>
<li id="nav-lab"><a href="#">Lab</a></li>
<li id="nav-reviews"><a href="#">Reviews</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>
</ul>

我已经尝试输入'中心'html标签，但它并没有集中任何内容，并且确实对菜单造成了污染。

任何帮助都非常适合！

谢谢，玛蒂

Answer 1

我做了一个导航栏的小提琴，这样你就可以看到它是如何工作的。您可以在此处访问它：http://jsfiddle.net/BQj3P/

要使#nav元素居中，最简单的方法是将其包装在div中。创建#nav-wrapper元素并按照之前设置#nav样式的方式设置样式：

#nav-wrapper {  
    margin:0;   
    padding:0;
    background:#808259 url(nav_bg.jpg) 0 0 repeat-x;    
    width:100%; 
    float:left; 
    border:1px solid #42432d;
    text-align: center;
}

您会注意到一个重要的区别：text-align: center。这有助于您集中#nav ul。

#nav本身现在的样式如下：

#nav {
    margin: 0;
    padding: 0;
    display: inline-block;
}

display: inline-block是整个导航按钮集中所需的最后一块。

要将文本置于按钮内部，您的原始代码会使用此行设置#nav列表项的样式：padding:20px 40px 4px 10px;

换句话说，右边填充设置为40px，左边设置为10px。只需将行更改为padding:20px 20px 4px 20px;，即可将文字居中。

查看小提琴了解更多详情。

Answer 2

使用CSS很有帮助。我有一个单独的样式表。

您需要嵌套，以便外部的所有元素都集中在其中，然后内部菜单项具有特定的宽度，因此它们不会最终结合在一起。

<div class="centre">        
            <div class="block">
                <li id="nav-home"><a href="http://www.martyversusaig.com">Home</a></li>
            </div>
            <div class="block">
                <li id="nav-about"><a href="http://www.websitegoodies.com/guestbook.php?a=view&amp;id=1045057" target="&rdquo;_blank&rdquo;">Your Story</a></li>
            </div>

我的CSS：

.centre
{
  text-align: center;
  margin: 0 auto;
}
.block {
    width: 100px;
    display:inline-block;
}

如何将菜单项置于中心位置？

2 个答案: