central align nav having dropdown

Question

How to central align navbar from here

I tried:

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

also with

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

disclaimer: I have no experience in css. If it's obvios please close the question with reference.

Answer 1

The common way to horizontally center block-level elements is using margin: 0 auto;:

.dropdownmenu {
  margin: 0 auto;
}

But this requires a specific width. In your case, it would be better to define a container element and set text-align: center;. I would recommend to not using floats here! Just make your <li> elements display: inline-block;.

Here is a working example (watch in fullscreen):

.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>