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.

Dosia

It works for me, are you sure no other styles are overriding? I tested by simply injecting your markup on a F4 template: foundation.zurb.com/templates4/banded.html – Fortuna

Yes, no custom styles added. This is on a plain F4 template. – Dosia

What if you put the text-center class on the UL? Or simply add text-align:center to the li-tags – Fortuna

I accidentally omitted the inline-list class in original post. I've edited it now. This is probably why the list centered for you to begin with. I've tried using the same blank template as you to ensure no overriding of styles. Ive tried adding text-center and text-align:center classes on both ul and li. No luck with either. – Dosia

What if you add display:inline-block; to your <ul>? – Fortuna

I came across this post on github for a workaround: github.com/zurb/foundation/issues/3114. Any better solutions? – Dosia

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.

Panteutonism

Answer 2

I couldn't get Adam's solution to work, but found that Foundation's .inline-list floats <li> to the left, so it's easier to just apply the CSS to a <ul class="text-center">:

ul {
 list-style-type:none;
}

li {
 display: inline-block;
}

Here it is working: http://cdpn.io/eGsky

As answered here: http://foundation.zurb.com/forum/posts/1096-centering-an-inline-list

Poteet