Centering Items within Navigation Bar

问题

I've been trying to center the items within the navigation but no such luck. Every single solution turns my navigation bar from this: horizontal navigation bar to this: vertical navigation bar.

Any help would be greatly appreciated!

HTML with CSS code:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
}

li {

  float: left;   

}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

<html>
  <head>
  </head>
  <body>

    <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>

  </body>
</html>

回答1:

Just remove the float from the li and make the inline-block

li {    
/* float: left;   */
display:inline-block;
}

The first rule of centering is..."Don't use floats"

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
}
li {
  display: inline-block;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

<ul>
  <li><a class="active" href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
  <li><a href="#about">About</a>
  </li>
</ul>

回答2:

I removed your css on li tag with float and changed it to display and width:

li {
display: -webkit-inline-box;
width: 60px;

}

https://i.stack.imgur.com/LbYd4.png`

I hope this helped you @C. Lagos

来源：https://stackoverflow.com/questions/39067129/centering-items-within-navigation-bar

标签

html

css

web

navigationbar