我怎样才能居中我的菜单项？

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

我的菜单栏的代码是在这里：

<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标签，但它并没有什么中心和真的弄脏了菜单。

任何帮助大大apprecaited！

感谢，马蒂

来源

2013-07-31 user2639202

我不会使用'li'标签，而是使用'div'代替。 “李”实际上是用来做一个垂直列表，通常用子弹或数字或指标。 – lurker

它有助于使用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-31 18:11:41 IdeoREX

我会完全失去'li'，只使用'div'。相应地设置CSS。 – lurker

你不能把div元素放在li上。 li元素必须是ul的直接子元素。 –

我做你的导航栏的小提琴，所以你可以看到它是如何工作的。你可以在这里访问它：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;

换句话说，正确的填充设置为40像素和左设置为10px 。只需将该行更改为padding:20px 20px 4px 20px;即可将文字居中。

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

来源

2013-07-31 19:26:08

我怎样才能居中我的菜单项？

回答

相关问题