pequena grade de bloco não centrando os polegares corretamente - css, zurb-foundation

Eu tenho 3 polegares que quero centralizar em uma linha. O código é

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

Mas de alguma forma os polegares estão começando da esquerda e não no centro. você pode sugerir como corrigir isso. aqui está a foto

Aqui está o link LIGAÇÃO

Você pode ver que os polegares estão flutuando para a esquerda. como centralizá-los. obrigado.

Respostas:

1 para resposta № 1

Substitua uma linha pelas seguintes

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

A chave é adicionar style="text-align: center;" e o problema será corrigido

---

1 para resposta № 2

Obrigado por postar o URL.

Basta adicionar text-align:center; na tua .small-block-grid-3 > li{}

Entre em contato se tiver alguma dúvida.

CSS

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

---

1 para resposta № 3

Adicione este css às ​​suas tags de imagem:

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

Alinhará a imagem para center presente em li tag.

---

1 para resposta № 4

Pode ser bom saber, essa fundação também possui uma classe CSS chamada "text-center" que pode ser aplicada aos elementos conforme necessário :-)

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

---