Page Widget How to - Create centered Menu Bar

Question

We would like to know how to create centered Menu Bar.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.testmenu {<!-- w  w w .j  a v a 2  s. c o  m-->
  width: 100%;
}

.menu-items {
  width: 100%;
  list-style-type: none;
  background: #98bf21;
  margin: 0;
  padding: 2% 0 2% 0;
  text-align: center;
}

.menu-item {
  display: inline;
  width: auto;
}

.menu-item a {
  width: 100%;
  padding: 2%;
  font-weight: bold;
  color: #FFFFFF;
  background: #98bf21;
  font-family: Arial, Helvetica;
  text-decoration: none;
  text-transform: uppercase;
}

.menu-item a:focus, .menu-item a:hover, .menu-item a:visited {
  background-color: #7A991A;
}
</style>
</head>
<body>
  <div class="testmenu">
    <ul class="menu-items">
      <li class="menu-item"><a href="#home">Home</a></li>
      <li class="menu-item"><a href="#news">News</a></li>
      <li class="menu-item"><a href="#contact">Contact</a></li>
      <li class="menu-item"><a href="#about">About</a></li>
    </ul>
  </div>
</body>
</html>

The code above is rendered as follows: