A Pen by Ian Lintner.

Horizontal-Align-UL.markdown

Horizontal Align UL

This is code to horizontally align a dynamic height and width ul li.

A Pen by Ian Lintner on CodePen.

License.

index.html

<div class="container">
  <div class="navbar">
     <div>
      <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/">Contact Us</a></li>
         <li><a href="/">Login</a></li>
    </ul>
    </div>
  </div>
</div>

style.css

.container {
    width: 300px;
    height: 300px;
    background-color: #F5F5F5;
}
.navbar {
    color: #F0F0F0;
    overflow:hidden;
    width: 100%;
}
.navbar > div {
    position:relative;
    left:50%;
    float:left;
}
.navbar ul {
    position:relative;
    left:-50%;
    float:left;
}
.navbar li {
    float:left;
    clear: both;
}
.navbar li + li {
    margin-left:20px;
}