엄지 손가락을 적절하게 중심으로하는 작은 블록 그리드

Question

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>

.

그러나 어쨌든 엄지 손가락은 중앙에 아닌 왼쪽부터 시작됩니다. 그 문제를 해결하는 방법을 제안 할 수 있습니까? 여기에 그림이 있습니다

링크는 링크

엄지 손가락이 왼쪽으로 떠있는 것을 볼 수 있습니다. 그들을 중심으로하는 방법. 고마워.

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 태그에있는 li에 이미지가 정렬됩니다.

Answer 4

는 그 재단이 필요에 따라 요소에 적용 할 수있는 "Text-Center"라는 CSS 클래스도 가지고 있습니다. -)

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

.