title: How do I center list items inside a UL element?
body: <p>How do I center list items inside a ul without using extra divs or elements. I have the following. I thought <code>text-align:center</code> would do the trick. I can't seem to figure it out. </p>
  
  <pre><code>&lt;style&gt;
  ul {
      width:100%;
      background:red;
      height:20px;
      text-align:center;
  }
  li {
      display:block;
      float:left;
      background:blue;
      color:white;
      margin-right:10px;
  }
  &lt;/style&gt;
  
  &lt;ul&gt;
    &lt;li&gt;test&lt;/li&gt;
    &lt;li&gt;test&lt;/li&gt;
    &lt;li&gt;test&lt;/li&gt;
    &lt;li&gt;test&lt;/li&gt;
    &lt;li&gt;test&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Check jsfiddle <a href="http://jsfiddle.net/3Ezx2/1/" rel="noreferrer">http://jsfiddle.net/3Ezx2/1/</a></p>