grade de blocos pequenos não centralizando os polegares corretamente

Question

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

    <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>

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

Aqui está o link LINK

Você pode ver que os polegares flutuam para a esquerda.como centralizá-los.obrigado.

Answer 1

Substitua uma linha pelo seguinte

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

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

Answer 2

Obrigado por postar o URL.

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

Por favor, deixe-me saber se você tiver dúvidas.

CSS

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

Answer 3

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

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

Ele irá alinhar a imagem center presente em li marcação.

Answer 4

Talvez seja bom saber que essa base 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>