Geek Answers Handbook

Centering Lists at the Zurb Foundation

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

The pre-created css classes "text-center" and "centered" work fine for other elements, but not for lists.

A review of the older question regarding images has similar results.

This does not 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, on deletion, this does the job (but obviously is not the 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>

You have a suggestion on how this style can affect the list.

Thanks.

+6
source share
2 answers

I think this 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 div column. As an example, I created codepen, http://cdpn.io/rwJjf . I used Foundation 5.0.3 in my example, but I do not think it will make a difference.

Here are the resources I used:

I hope this helps.

+9
source

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

 ul { list-style-type:none; } li { display: inline-block; }

Here it works: http://cdpn.io/eGsky

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

+4
source

More articles:


All Articles