0

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

该链接位于：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>

我试过输入'center' html 标签，但它没有任何东西居中并且真的弄乱了菜单。

非常感谢任何帮助！

谢谢，马蒂

4

2 回答 2

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. 这将帮助您居中#navul。

它#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;将使您的文本居中。

查看小提琴以获取更多详细信息。

于 2013-07-31T19:26:08.163 回答
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;
}
于 2013-07-31T18:11:41.200 回答