Question

请有人帮忙吗？如何将这个CSS菜单居中？请参阅下面的代码开头无论我尝试什么似乎都不起作用。我确定这很简单，但我无法理解。提前谢谢！

#cssmenu {
  position: relative;
  height: 44px;
  background: #ffffff;
  width: auto;
  float: left;
}
#cssmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
  position:relative;
  display: inline-block;     
  vertical-align: top; 
}
#cssmenu > ul {
  position: relative;
  display: block;
  background: #ffffff;
  height: 32px;
  width: 100%;
  z-index: 500;
}
#cssmenu > ul > li {
  display: block;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  position:relative;
}
#cssmenu > ul > #menu-button {
  display: none;
}
#cssmenu ul li a {
  display: block;
  font-family: 'Noto Sans';
  text-decoration: none;
}
#cssmenu > ul > li > a {
  font-size: 14px;
  font-weight: bold;
  padding: 15px 20px;
  color: #000000;
  text-transform: uppercase;
  -webkit-transition: color 0.25s ease-out;
  -moz-transition: color 0.25s ease-out;
  -ms-transition: color 0.25s ease-out;
  -o-transition: color 0.25s ease-out;
  transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
  color: #000000;
}
#cssmenu li.has-sub::after {
  display: block;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}
#cssmenu > ul > li.has-sub::after {
  right: 10px;
  top: 20px;
  border: 5px solid transparent;
  border-top-color: #000000;
}
#cssmenu > ul > li:hover::after {
  border-top-color: #000000;
}

HTML

<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Answer 1

好的，我将假设在你的HTML中，＃cssmenu元素是你想要居中的元素。正如其他人所说，使用width:和margin: 0 auto可以使块元素居中。

这里的困境是，如果你为它设置一个宽度，那么你必须在每次菜单项改变时调整宽度，所以我所做的就是让它没有width属性而只增强它（中心）对于有JS支持的用户。

如果使用jQuery，你可以这样做：

function navCenter(){
  if($('#cssmenu').length){
    var ulWidth = 0;
    $('#cssmenu > ul > li').each(function(){
      ulWidth += $(this).outerWidth(true);
    });

    $('#cssmenu').css('width', ulWidth);
  }
}

因此，上面的代码在#cssmenu元素上设置宽度，而css应用margin: 0 auto，使其居中。

如果这有意义，请告诉我。

Answer 2

执行此操作的一种方法是将#cssmenu的显示类型设置为inline-block，然后将所有内容包装在text-align: center的容器中。您还需要在text-align: left上设置#cssmenu，以便文本再次正确对齐。

JSFiddle

Answer 3

这就是如何将ul及其所有列表项置于没有js或jquery的容器中。如果列表项被更改，则无需调整内容。

<div class="menuwrapper">
  <ul class="nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

.menuwrapper {
  width: 100%;
  text-align: center;
}

.nav, .nav li, .nav a {
  margin: 0;
  padding: 0;
  border: 0;
}

.nav {
  float: left;
  position: relative;
  left: 50%;
  top: 0;
  list-style-type: none;
  text-align: center;
}

.nav li {
  float: left;
  width: auto;
  right: 50%;
  display: block;
  position: relative;
  list-style-type: none;
  cursor: pointer;
}

.nav a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  font: bold 16px arial,sans-serif;
  line-height: 1;
  outline: 0;
}

如何居中CSS导航菜单

3 个答案: