[css] 이미지 데드 센터를 부트 스트랩과 정렬하는 방법

Twitter Bootstrap v3.0.3에는 클래스가 있습니다 : center-block

중심 내용 블록

표시 할 요소를 설정합니다 : 여백을 통한 블록 및 가운데. 믹스 인 및 클래스로 제공됩니다.

태그에 클래스를 추가하면 .center-block됩니다.img

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

부트 스트랩에서 CSS 스타일 호출 .center-block이 이미 있습니다.

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

여기 에서 샘플을 볼 수 있습니다

답변

<div class="row text-center">
  <img ...>
</div>

<img src="..." class="mx-auto d-block"/>

<img src="images/default.jpg" class="center-block img-responsive"/>

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

.pagination-centered {
  text-align: center;
}

<img src="..." alt="..." class="img-responsive center-block" />

.row .span4 {
    text-align: center;
}