6

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.

Community
  • 1
  • 1
slaterio
  • 215
  • 2
  • 6
  • It works for me, are you sure no other styles are overriding? I tested by simply injecting your markup on a F4 template: http://foundation.zurb.com/templates4/banded.html – Daniel Hallqvist Dec 11 '13 at 14:27
  • Yes, no custom styles added. This is on a plain F4 template. – slaterio Dec 11 '13 at 16:02
  • What if you put the text-center class on the UL? Or simply add text-align:center to the li-tags – Daniel Hallqvist Dec 12 '13 at 11:10
  • 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. – slaterio Dec 12 '13 at 11:40
  • What if you add display:inline-block; to your
      ?
     – Daniel Hallqvist Dec 12 '13 at 18:53
  • I came across this post on github for a workaround: https://github.com/zurb/foundation/issues/3114. Any better solutions? – slaterio Dec 13 '13 at 10:43

2 Answers2

9

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:

I hope that helps.

Adam Huffman
  • 1,031
  • 14
  • 21
4

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

dwood7399
  • 41
  • 3