Question

我已经看到很多关于这个话题的问题，但我似乎无法弄清楚我做错了什么。我想让菜单在“菜单”div中居中，这样无论屏幕尺寸/浏览器如何，它都将始终居中。

以下是我对HTML和CSS的看法：

.site-navigation {
    display: block;
    font-family: 'Georgia';
    font-size: 18px;
    font-weight: bold;
	position:relative;
	margin-left:auto;
	margin-right: auto;
		
}

.site-navigation ul {
  background: #202020;
    list-style: none;
    margin: auto;
    padding-left: 0;
}

.site-navigation li {
    color: #d29500;
	background: #202020;
    display: block;
    float: left;
    margin: 0 2px 0 0;
    padding: 12px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
}
  
.site-navigation li a {
  color: #d29500;
  text-decoration: none;
  display: block;
}

.site-navigation li:hover {
    @include transition(background, 0.2s);
    background: #000000;
    cursor: pointer;
}

.site-navigation ul li ul {
    background: #000000;
    visibility: hidden;
    float: left;
	min-width: 150px;
    position: absolute;
	transition: visibility 0.65s ease-in;
	margin-top:12px;
    left: 0;
    z-index: 999;
}

.site-navigation ul li:hover > ul,
.site-navigation ul li ul:hover {
   visibility: visible;
}

.site-navigation ul li ul li {
    clear: both;
    padding: 5px 0 5px 18px;
  width: 100%;
}

.site-navigation ul li ul li:hover {
    background: #000000;
}

<div id= "menu">
<div class="site-navigation" >
  <ul class="menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">About Us</a>
      <ul class="dropdown">
        <li class="menu-item sub-menu"><a href="#">Location</a></li>
		<li class="menu-item sub-menu"><a href="#">Contact</a></li>
      </ul>
    </li>
	<li class="menu-item"><a href="#">Schedule</a></li>
	 <li class="menu-item"><a href="#">Roster</a></li>
    <li class="menu-item"><a href="#">Alumni Corner</a></li>
    <li class="menu-item"><a href="#">Gallery</a></li>
    <li class="menu-item"><a href="#">Support</a></li>
  </ul>
</div>
</div>

任何帮助将不胜感激！

Answer 1

只需添加

#menu
{
    display: flex;
}

它应该可以解决您的问题（确保您需要的所有浏览器都支持此问题）

Answer 2

如果要将元素置于margin: 0 auto的中心，则需要设置宽度。您可以使用percentages来使其响应。

Answer 3

您可以按照Jesse的建议使用flexbox，但我只想使用旧的display: inline-block;属性。如果您想支持IE10，则不能使用flexbox（请参阅http://caniuse.com/#feat=flexbox）

删除background: #202020;并将text-align: center;添加到.menu
删除float: left;并将display: block更改为.menu-item中的display: inline-block

.menu-item s之间的边距现在因空间字符而变大，这是由内联块属性引起的。

Answer 4

从.site-navigatioin li选择器中删除float：left规则，并将li的display属性设置为inline-block：http://prntscr.com/8rqehz 注意IE7不支持内联块属性。

在div中居中CSS菜单

4 个答案: