트위터 부트 스트랩에서 열 중앙 정렬

트위터 부트 스트랩에서 열 중앙 정렬

---

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

• Twitter Bootstrap 3을 사용하여 열 중앙에 배치 33 답변

저는 부트 스트랩을 배우기 시작했습니다. 내 질문은 열을 가로로 가운데 정렬하는 방법이고 부트 스트랩에는 12 개의 열 레이아웃이 있으며 중간 숫자는 없습니다. 11 열 레이아웃 인 경우 더 명확하게 말하면 중간 숫자는 6 (왼쪽 5 개 열, 중간 1 개 열, 오른쪽 5 개 열)이됩니다.

---

질문은 여기에 올바르게 대답합니다. Twitter Bootstrap 3을 사용하여 칼럼 중앙에 배치

홀수 행의 경우 : 즉, col-md-7 또는 col-large-9 사용

중앙에 배치하려는 열에 col-centered를 추가하십시오.

<div class="col-lg-11 col-centered">    

그리고 이것을 스타일 시트에 추가하십시오.

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

짝수 행의 경우 : 즉, col-md-6 또는 col-large-10 사용

부트 스트랩 3의 오프셋 col 클래스를 사용하기 만하면됩니다. 즉,

<div class="col-lg-10 col-lg-offset-1">

---

부트 스트랩 3을 사용하면 원하는 것을 달성하는 가장 좋은 방법은 열 을 오프셋하는 것 입니다. 자세한 내용은 다음 예제를 참조하십시오.
http://getbootstrap.com/css/#grid-offsetting

요컨대, div를 보지 않고 여기에 사용자 정의 클래스를 사용하지 않고도 도움이 될 수있는 예제가 있습니다. " col-6 "이 사용되는 방법과 그 절반이 3 인 방법에 유의하십시오 . 따라서 " offset-3 "이 사용됩니다. 균등하게 분할하면 원하는 중심 간격 이 허용 됩니다.

<div class="container">
<div class="col-sm-6 col-sm-offset-3">
your centered, floating column
</div></div>

---

1 개의 열을 넣을 수 없다면 중간에 2 개의 열을 넣을 수 있습니다 ... (나는 단지 답을 조합하는 것입니다) Bootstrap 3의 경우

<div class="row">
   <div class="col-lg-5 ">5 columns left</div>
   <div class="col-lg-2 col-centered">2 column middle</div>
   <div class="col-lg-5">5 columns right</div>
</div>

심지어 다음을 스타일에 추가하여 텍스트 중앙 열을 사용할 수 있습니다.

.col-centered{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

또한 여기에 또 다른 솔루션이 있습니다.

---

위에서 주어진 접근 방식을 시도했지만 이러한 방법은 열 중 하나의 콘텐츠 높이가 동적으로 증가 할 때 실패하고 기본적으로 다른 열을 아래로 밀어냅니다.

나를 위해 기본 테이블 레이아웃 솔루션이 작동했습니다.

// Apply this to the enclosing row
.row-centered {
  text-align: center;
  display: table-row;
}
// Apply this to the cols within the row
.col-centered {
  display: table-cell;
  float: none;
  vertical-align: top;
}

참조 URL : https://stackoverflow.com/questions/18032609/center-align-a-column-in-twitter-bootstrap