title: How to center an unordered list?
body: <p>I need to center an unordered list of unknown width, while still keeping the list-items left aligned.</p>
  
  <p>Achieve the same result as this:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div { text-align: center; }
  ul { display: inline-block; text-align: left; }
  </code></pre>
  
  <p>Except my <code>&lt;ul&gt;</code> doesn't have a parent div. <code>ul { margin: 0 auto; }</code> doesn't work because I don't have a fixed width. <code>ul { text-align: center; }</code> doesn't work because the list-items won't be left aligned anymore. So how can I center this <code>&lt;ul&gt;</code> while keeping the <code>&lt;li&gt;</code>s left aligned (without having a parent div wrapper)?</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>: Perhaps my wording wasn't the best... The first block of code already works... what i need is to do it <strong>without</strong> the <code>&lt;div&gt;</code> wrapper, if that's possible of course. Float tricks? Pseudo element tricks? There must be a way.</p>