[css] Twitter Bootstrap 3을 사용하여 열 중심

<div>부트 스트랩 3에서 열의 중심을 맞추는 방법에는 두 가지가 있습니다 .

접근법 1 (오프셋) :

첫 번째 접근 방식은 부트 스트랩 자체의 오프셋 클래스를 사용하므로 마크 업을 변경하거나 추가 CSS를 요구하지 않습니다. 핵심은 오프셋을 나머지 행 크기의 절반과 동일하게 설정하는 것 입니다. 예를 들어, 크기가 2 인 열은 오프셋 5를 추가하여 중심이됩니다 (12-2)/2.

마크 업에서 이것은 다음과 같습니다.

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

이제이 방법에는 명백한 단점이 있습니다. 그것은 단지도 열 크기에 작동하는 , 그래서 단지 .col-X-2, .col-X-4, col-X-6, col-X-8, 및 col-X-10지원됩니다.

접근법 2 (구 margin:auto)

입증 된 기술 을 사용하여 열 크기 를 중앙에 맞출 수 있습니다margin: 0 auto; . Bootstrap의 그리드 시스템에 의해 추가 된 플로팅을 처리하면됩니다. 다음과 같은 사용자 정의 CSS 클래스를 정의하는 것이 좋습니다.

.col-centered{
    float: none;
    margin: 0 auto;
}

이제 모든 화면 크기에서 모든 열 크기에 추가 할 수 있으며 Bootstrap의 반응 형 레이아웃과 완벽하게 작동합니다.

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

참고 : 두 가지 기술을 모두 사용하면 .row요소를 건너 뛸 수 있고 열을 가운데로 배치 .container할 수는 있지만 컨테이너 클래스의 패딩으로 인해 실제 열 크기에는 약간의 차이가 있습니다.

최신 정보:

v3.0.1 부트 스트랩에는를 center-block사용 margin: 0 auto하지만 이름이없는 내장 클래스 float:none가 있으므로 그리드 시스템에서 작동하도록 CSS에 추가 할 수 있습니다.

답변

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

.center-block {
    float: none !important
}

<div class="col-md-6 center-block">Example</div>

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

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

text-center

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

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>