[css] Bootstrap2로 div를 중앙에 배치하는 방법은 무엇입니까?

Program / 글쓴이

http://twitter.github.com/bootstrap/scaffolding.html

나는 모든 조합처럼 시도했습니다.

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

또는 

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>
</div>

스팬 및 오프셋 번호 변경 …

하지만 페이지 중앙에 완벽하게 정렬 된 간단한 상자를 얻을 수 없습니다.

6 열 너비의 상자를 가운데에두고 싶습니다.

편집하다:

함께 했어 

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

하지만 상자가 너무 넓습니다. span7으로 할 수있는 방법이 있습니까?

span7 offset2왼쪽에 span7 offset3추가 패딩을 제공합니다. 오른쪽에 추가 패딩을 제공합니다.

답변

과 같이 범위의 크기를 줄임으로써, 원하는 크기로 사업부 자체를 축소 게다가 … class="span6 offset3", class="span4 offset4", 등 … 간단 같은 무언가 style="text-align: center"사업부에 당신이 찾고있는 영향을 미칠 수

설정된 오프셋과 함께 span7을 사용할 수 없으며 페이지 중앙에 범위를 가져올 수 없습니다 (총 범위 = 12이기 때문에)

답변

부트 스트랩의 범위는 왼쪽으로 떠 있습니다. 중심을 맞추는 데 필요한 것은이 동작을 무시하는 것입니다. 내 스타일 시트에 다음을 추가하면됩니다.

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

이 클래스를 정의한 경우 범위에 추가하기 만하면됩니다.

<div class="span7 center"> box </div>

이 커스텀 센터 클래스는 부트 스트랩 CSS 이후 에 정의되어야합니다 . 사용할 수 !important있지만 권장하지 않습니다.

답변

Bootstrap3에는 .center-block사용할 수 있는 클래스가 있습니다. 다음과 같이 정의됩니다.

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

여기에 문서가 있습니다 .

답변

전체 부트 스트랩 (자동 왼쪽 / 오른쪽 방식이 아님)을 사용하려면 12 개 열 (예 : 공백 2 개, 내용 8 개, 공백 2 개)에 맞는 패턴이 필요합니다. 이것이 바로이 설정이 할 일입니다. -md- 변형 만 다루며 col-xs-12를 추가하여 전체 크기로 조정하는 경향이 있습니다.

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

답변

단일 컨테이너를 중앙에 정렬하려는 것 같습니다. 부트 스트랩 프레임 워크는 하나의 예제를 지나치게 복잡하게 만들 수 있습니다. 다음과 같이 고유 한 스타일을 가진 독립형 div가있을 수 있습니다.

<div class="login-container">
  <!-- Your Login Form -->
</div>

및 스타일 :

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

부트 스트랩 .containerdiv 내 어딘가에 중첩되어 있으면 제대로 작동합니다 .

답변

수업 centercontents 추가

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

답변

@ZuhaibAli 코드는 나를 위해 일하지만 조금 변경했습니다.

CSS에서 새 클래스를 만들었습니다. 

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

그런 다음 div는 

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

div 자체의 너비에 col-md-6을 추가했습니다.이 상황에서 div는 크기의 절반이고 부트 스트랩에는 1-12 col md가 있습니다.