Question

集中对齐导航栏

我试过了：

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

还有

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

免责声明：我没有css的经验。如果是obvios，请参考问题。

Answer 1

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

.dropdownmenu {
  margin: 0 auto;
}

但这需要特定的宽度。在您的情况下，最好定义一个容器元素并设置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>

Answer 2

调整css，如下所示

.dropdownmenu {text-align:center}
.dropdownmenu ul {
    background: gray;
    list-style: none;
    width: auto; display:inline-block
}

Answer 3

更新你的CSS：

body {
  text-align: center;
}
.dropdownmenu {
  display: inline-block;
  margin: 0 auto;
}

或

.dropdownmenu {
  text-align: center;
}
.dropdownmenu ul {
  display: inline-block;
  width: auto;
  margin: 0 auto;
}

Answer 4

.container {
  text-align: center;
}

.dropdownmenu ul,
.dropdownmenu li {
  margin: 0;
  padding: 0;
}

.dropdownmenu ul {
  background: gray;
  list-style: none;
  text-align:center;
}

.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>

中央对齐导航有下拉列表

4 个答案: