親指を正しくセンタリングしていない小さなブロックグリッド

Question

私は3列に中心を付けたい3つの親指を持っています。コードは

です

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

.

しかし、どういうわけか親指は左から始めていて、中央には始まっていません。 あなたはそれを修正する方法を提案することができますか。 これが絵です

これはリンク link

です。

親指が左に浮かんでいることがわかります。 それらを中心にする方法 ありがとう。

Answer 1

次のような線を置き換える

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

.

キーはstyle="text-align: center;"を追加するためのもので、問題が解決されます

Answer 2

URLを投稿してくれてありがとう。

text-align:center;

に.small-block-grid-3 > li{}を追加する

あなたが懸念しているかどうか私に知らせてください。

css

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

.

Answer 3

あなたのイメージにこのCSSを追加する：

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

.

centerタグに存在する画像に画像を揃えます。

Answer 4

は知っておくといいかもしれません。この財団には、必要に応じて要素に適用できる「Text-Center」というCSSクラスもあります。 - ）

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

.