title: How to center li tags list
body: <p>I'm displaying list of tags in a website. This is how it is displayed now</p>
  
  <p><img src="https://i.stack.imgur.com/ppRAr.jpg" alt="enter image description here"></p>
  
  <p><a href="http://jsfiddle.net/hxbB9/3/" rel="nofollow noreferrer"><em>I've created a JSFiddle, Please check.</em></a></p>
  
  <p>Now the tags are aligned left, I need to align tags to centre. Tried adding <code>text-align: center;</code> to <code>.tags</code> class but it does not center the tags. </p>
  
  <p>This is my HTML &amp; CSS code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="tags"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;tag 0000000&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;tag 1111111111111&lt;/a&gt;&lt;/li&gt;
          ...
      &lt;/ul&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.tags
  {
      display:table;
  }
  
  .tags li
  {
      float:left;
      list-style-type: none;
      text-decoration: none;
      margin: 10px 0 0 0;
  }
  
  .tags ul a
  {
      text-decoration: none;
      padding: 4px;
      border: 1px solid #F2F0F0;
      margin: 2px;
  }
  </code></pre>
  
  <p>I need to display tags as many as fit in to a row, but the contents of the row must be aligned center. </p>