html - 具有下拉菜单的中央对齐导航

如何从here居中对齐导航栏
我试过：

.dropdownmenu li {
    **float: center;**
    position: relative;
    width:auto;
    **text-align: center;**

还有

div#nav{
  text-align: center;
}
div#nav ul{
  display: inline-block;
}

免责声明：我没有css的经验。如果是显而易见的，请参考结束问题。

最佳答案

水平居中块级元素的常用方法是使用margin: 0 auto;：

.dropdownmenu {
  margin: 0 auto;
}

但这需要一个特定的宽度。在您的例子中，最好定义一个container元素并设置text-align: center;。我建议不要在这里使用漂浮物！只需将<li>元素设置为display: inline-block;。
下面是一个工作示例（全屏观看）：

.container {
  text-align: center;
}

.dropdownmenu ul,
.dropdownmenu li {
  margin: 0;
  padding: 0;
}

.dropdownmenu ul {
  background: gray;
  list-style: none;
}

.dropdownmenu li {
  display: inline-block;
  position: relative;
  width: auto;
}

.dropdownmenu a {
  background: #30A6E6;
  color: #FFFFFF;
  display: block;
  font: bold 12px/20px sans-serif;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

.dropdownmenu li:hover a {
  background: #000000;
}

#submenu {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 35px;
  visibility: hidden;
  z-index: 1;
}

li:hover ul#submenu {
  opacity: 1;
  top: 40px;
  /* adjust this as per top nav padding top & bottom comes */
  visibility: visible;
}

#submenu li {
  float: none;
  width: 100%;
}

#submenu a:hover {
  background: #DF4B05;
}

#submenu a {
  background-color: #000000;
}

<div class="container">
  <nav class="dropdownmenu">
    <ul>
      <li><a href="http://www.jochaho.com/wordpress/">Home</a></li>
      <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">About Me</a></li>
      <li><a href="#">Articles on HTML5 & CSS3</a>
        <ul id="submenu">
          <li><a href="http://www.jochaho.com/wordpress/difference-between-svg-vs-canvas/">Difference between SVG vs. Canvas</a></li>
          <li><a href="http://www.jochaho.com/wordpress/new-features-in-html5/">New features in HTML5</a></li>
          <li><a href="http://www.jochaho.com/wordpress/creating-links-to-sections-within-a-webpage/">Creating links to sections within a webpage</a></li>
        </ul>
      </li>
      <li><a href="http://www.jochaho.com/wordpress/category/news/">News</a></li>
      <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">Contact Us</a></li>
    </ul>
  </nav>
</div>

关于html - 具有下拉菜单的中央对齐导航，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42804374/