A Pen by owlsky.

Centering-UL-element.markdown

Centering UL element

A Pen by owlsky on CodePen.

License.

index.html

<div class="container">
  <ul class="menu">
    <li><a href="">home</a></li>
    <li><a href="">about</a></li>
    <li><a href="">works</a></li>
    <li><a href="">contact</a></li>
  </ul>
</div>

style.css

/* reset */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* style */
.container {
  border: 1px solid #ddd;
  overflow: hidden;
  padding: 10px 0;
}

.menu {
  position: relative;
  float: left;
  left: 50%;
}
.menu li {
  position: relative;
  float: left;
  right: 50%;
  margin: 0 10px;
}

.menu li a {
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 10px;
  background-color: #eaeaea;
  color: #222;
}