title: CSS Text Align Not Working With LIs
body: <p>I've got a set of <code>li</code>'s containing text which I would like to be displayed and centered horizontally within their <code>ul</code> with CSS.  I can't seem to get this to work, another answer suggested using <code>display:inline</code> but this did nothing.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>header li {
      margin-left:20px;
      margin-right:0px;
      border-left:1px #FFF solid ;
      float:left;
      color:#FFF;
      padding:2px 2px 2px 2px;
      margin-bottom:10px;
      text-align:center;
  }
  
  header ul {
      width:321px;
      margin-left:auto;
      margin-right:auto;
      background:url(repeatback.png);
      height:30px;
  }
  </code></pre>
  
  <p>requested html:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;About&lt;/li&gt;
      &lt;li&gt;Portfolio&lt;/li&gt;
      &lt;li&gt;Resume&lt;/li&gt;
      &lt;li&gt;Links&lt;/li&gt;
      &lt;li&gt;Twitzar&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>