无法居中导航栏

我试了太久，因为我想坦白。我有一个非常基本的网站，我经过很长时间的努力能够居中标题图像，但导航栏不想。无法居中导航栏

这里是我的CSS：

nav { 
background-color: #fff; 
border: 1px solid #dedede; 
border-radius: 4px; 
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); 
color: #888; 
display: block; 
margin: 8px 22px 8px 22px; 
overflow: hidden; 
width: 510px; 
text-align: center; 
} 

nav ul { 
    margin: 0; 
    padding: 0; 
}

这里是我的html：

<div style="text-align:center"><img src="/images/headerbackgr1.png" alt="header_backgr"></div> 

<nav> 
<ul> 
    <li><a href="index.php">Home</a></li> 
    <li><a href="/owncloud/index.php">ownCloud</a></li> 
    <li><a href="download.php">Downloads</a></li> 
    <li> 
     <a href="about.html">Über BenDroid <span class="caret"></span></a> 
     <div> 
      <ul> 
       <!--ausgeblendete Optionen 
       <li><a href="location.htm">Standort</a></li> 
       <li><a href="staff.htm">Team</a></li> 
       --> 
       <li><a href="contact.php">Kontakt</a></li> 
      </ul> 
     </div> 
    </li> 
</ul>

继承人小提琴：http://jsfiddle.net/68x4uL1g/1/

任何帮助是极大的赞赏。

来源

2015-02-24 BenDroid

让您的导航元素的利润率是有意义的这样的场景：

margin: 8px auto;

这会自动给该元素的8像素顶部和底部边缘和中心，它在左，右页边距使他们平等的。

您现在有

margin: 8px 22px 8px 22px;

指定你的左，右页边距是它具有菜单上不必要的影响的22px。

这是你的小提琴与变革：

JSFiddle

提醒：这是正确的，但请记住，这会同时包含元素的父居中nav。在定义包含元素的宽度时请记住这一点。

来源

2015-02-24 20:54:57 leigero

谢谢。我现在觉得很愚蠢。 – BenDroid 2015-02-26 14:35:39

@BenDroid没有问题是一个愚蠢的问题。当你提出问题时，请确保你接受答案。接受有用的答案与在SO上提出良好问题一样重要。这就是让这个网站对追随我们的人有用的原因。 – leigero 2015-02-26 14:37:54

无法居中导航栏

回答

相关问题