small block grid not centering thumbs properly

Question

i have 3 thumbs i want to center in a row. The code is

    <div class="large-12 columns">
    <ul class="small-block-grid-3">
      <li><img class="shadow" src="img/thumbs/carWashHome.jpg"></li>
      <li><img   class="shadow" src="img/thumbs/homeCleanHome.jpg"></li>
      <li><img   class="shadow" src="img/thumbs/carpetCleanHome.jpg"></li>
    </ul>
  </div>

But somehow the thumbs are starting from left and not in center. can you suggest be how to fix that. here is the picture

Here is the link LINK

You can see that the thumbs are floated to left. how to center them. thanks.

Answer 1

Replace a line with following

<div class="large-12 columns" style="text-align: center;">

Key is to add style="text-align: center;" and problem will be fixed

Answer 2

Thanks for posting the URL.

Just add text-align:center; in your .small-block-grid-3 > li{}

Please let me know if you have concerns.

CSS

.small-block-grid-3 > li{
    text-align:center;
}

Answer 3

Add this css to your image tags:

display: block;
margin-left: auto;
margin-right: auto;

It will align image to center present in li tag.

Answer 4

Might be nice to know to, that foundation also has a CSS class called "text-center" that can be applied to elements as needed :-)

<div class="text-center">
content goes here...
</div>