부트 스트랩 : 열 내부에 콘텐츠를 가운데 정렬하는 방법은 무엇입니까?

부트 스트랩 : 열 내부에 콘텐츠를 가운데 정렬하는 방법은 무엇입니까?

---

이 질문에 이미 답변이 있습니다.

• Twitter Bootstrap을 사용하여 중앙 콘텐츠를 얻으려면 어떻게해야합니까? 23 답변

간단한 사용 사례 시나리오는 이미지 또는 부트 스트랩 열 내의 다른 콘텐츠를 사용하는 것입니다. 그리고 종종이 콘텐츠는 수평 중앙에 위치해야합니다.

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 text-center">
            <img class="img-responsive" src="img/some-image.png" title="this image needs to be centered">
        </div>
        <div class="col-sm-8 col-md-8 col-lg-8">
            some content not important at this moment
        </div>
    </div>
</div>

버전 3.1.0에서는 텍스트 중심에 클래스를 추가하면 이미지가 열 내부에 배치됩니다. 그러나 다른 문제를 해결하기 위해 버전 3.3.4로 이동해야했고이 동작 (텍스트 센터)이 이제 중단되었습니다. 열 안에 이미지 또는 기타 콘텐츠를 중앙에 배치하는 방법에 문제가 있습니다. 오류가 발생하기 쉬우거나 다른 포함 div가 필요하기 때문에 포함 된 요소에 클래스를 추가 할 필요가 없습니다.

---

이미지를 중앙에 배치하고 싶으십니까? 매우 쉽습니다. Bootstrap에는 두 가지 클래스 .center-block와 text-center.

이미지가되는 경우 이전을 사용하여 BLOCK추가, 예를 들어, 요소 img-responsive당신의에 클래스를 img만드는 img블록 요소를. 웹 콘솔에서 탐색하고 요소에 적용된 스타일을 보는 방법을 알고있는 경우이를 알아야합니다.

수업을 사용하고 싶지 않으세요? 문제 없습니다. 여기에 CSS 부트 스트랩이 사용됩니다. 사용자 정의 클래스를 만들거나 요소에 대한 CSS 규칙을 작성하여 Bootstrap 클래스와 일치시킬 수 있습니다.

 // In case you're dealing with a block element apply this to the element itself 
.center-block {
   margin-left:auto;
   margin-right:auto;
   display:block;
}

// In case you're dealing with a inline element apply this to the parent 
.text-center {
   text-align:center
}

---

div ie centerBlock을 추가하면됩니다. 그리고 CSS에서이 속성을 제공하여 이미지 또는 콘텐츠를 중앙에 배치합니다. 다음은 코드입니다.

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4">
            <div class="centerBlock">
                <img class="img-responsive" src="img/some-image.png" title="This image needs to be centered">
            </div>
        </div>
        <div class="col-sm-8 col-md-8 col-lg-8">
            Some content not important at this moment
        </div>
    </div>
</div>


// CSS

.centerBlock {
  display: table;
  margin: auto;
}

참고 URL : https://stackoverflow.com/questions/30526822/bootstrap-how-to-center-align-content-inside-column