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

时间:2013-07-31 18:06:18

标签: html menu hyperlink center

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

链接位于此处: http://www.martyversusaig.com

我的菜单条形码在这里:

<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标签,但它并没有集中任何内容,并且确实对菜单造成了污染。

任何帮助都非常适合!

谢谢, 玛蒂

2 个答案:

答案 0 :(得分:2)

我做了一个导航栏的小提琴,这样你就可以看到它是如何工作的。您可以在此处访问它: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;,即可将文字居中。

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

答案 1 :(得分:0)

使用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;
}