Centering lists in Zurb Foundation

Question

I am having trouble centering inline lists when using Zurb's Foundation 4.

The prebuilt css classes of 'text-center' and 'centered' work fine for other elements but not with lists.

A review of an older question concerning images has similar results.

This doesnt work:

    <div class="row">
      <div class="large-12 columns text-center">
        <ul class="inline-list">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
          <li><a href="#">Five</a></li>
        </ul>
      </div>
    </div>

However, when removing the this does work (but obviously is not preferred markup):

    <div class="row">
      <div class="large-12 columns text-center">
          <a href="#">One</a>
          <a href="#">Two</a>
          <a href="#">Three</a>
          <a href="#">Four</a>
          <a href="#">Five</a>
      </div>
    </div>

Do you have a suggestion on how lists can be affected by this style.

Thanks.

Answer 1

I think it is as simple as adding the following to your CSS file:

.inline-list{
     display: table;
     margin: 0 auto;
}

You can also remove the text-center class from your column div. I created a codepen, http://cdpn.io/rwJjf, as an example. I used Foundation 5.0.3 in my example, but I don't think it will matter.

Here are the resouces I used:

• Centering List Items Horizontally (Slightly Trickier Than You Might Think)
• display
• The display declaration

I hope that helps.