title: Centering lists in Zurb Foundation
body: <p>I am having trouble centering inline lists when using Zurb's Foundation 4.</p>
  
  <p>The prebuilt css classes of 'text-center' and 'centered' work fine for other elements but not with lists.</p>
  
  <p>A review of an <a href="https://stackoverflow.com/questions/12079049/zurb-foundation-center-content-in-the-grid">older question</a> concerning images has similar results.</p>
  
  <p>This doesnt work:</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;div class="row"&gt;
        &lt;div class="large-12 columns text-center"&gt;
          &lt;ul class="inline-list"&gt;
            &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Five&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>However, when removing the  this does work (but obviously is not preferred markup):</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;div class="row"&gt;
        &lt;div class="large-12 columns text-center"&gt;
            &lt;a href="#"&gt;One&lt;/a&gt;
            &lt;a href="#"&gt;Two&lt;/a&gt;
            &lt;a href="#"&gt;Three&lt;/a&gt;
            &lt;a href="#"&gt;Four&lt;/a&gt;
            &lt;a href="#"&gt;Five&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Do you have a suggestion on how lists can be affected by this style.</p>
  
  <p>Thanks.</p>