Twitter Bootstrap을 사용하여 중앙 집중식 컨텐츠를 얻는 방법은 무엇입니까?

매우 기본적인 예를 따르려고합니다. 시작 페이지와 그리드 시스템을 사용하여 다음을 기대했습니다.

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

... 중심 텍스트를 생성합니다.

그러나 여전히 맨 왼쪽에 나타납니다. 내가 무엇을 잘못하고 있지?

이것은 텍스트 센터링 ( 질문에 관한 내용 )입니다.

다른 유형의 컨텐츠는 Flavien 's answer를 참조하십시오 .

업데이트 : Bootstrap 2.3.0+ Answer

원래 답변은 초기 버전의 부트 스트랩이었습니다. 부트 스트랩 2.3.0부터 div에 클래스를 제공 할 수 있습니다.text-center .

원래 답변 (2.3.0 이전)

당신은 두 개의 클래스 중 하나를 정의 할 필요가 row또는 span12로모그래퍼을 text-align: center. http://jsfiddle.net/xKSUH/ 또는 http://jsfiddle.net/xKSUH/1/을 참조하십시오.

참고 : 이것은 Bootstrap 3에서 제거되었습니다 .

부트 스트랩 3 이전에 CSS 클래스를 다음 pagination-centered과 같이 사용할 수 있습니다 .

<div class="span12 pagination-centered">
    Centered content.
</div>

클래스 pagination-centered는 이미 bootstrap.css (또는 bootstrap.min.css)에 있으며 유일한 규칙이 있습니다.

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

부트 스트랩 2.3.0 사용 그냥 수업을 사용하십시오text-center

나는 대부분의 사람들이 실제로 텍스트 내용뿐만 아니라 전체div 를 중앙 에 배치하는 방법을 찾고 있다고 생각 합니다 (사소한 것입니다 ...).

두 번째 방법 (text-align : center를 사용하는 대신 HTML에서 항목을 가운데에 맞추는 것)은 너비와 자동 여백이 고정 된 요소 (왼쪽 및 오른쪽)를 갖는 것입니다. 부트 스트랩에서 자동 여백을 정의하는 스타일은 "컨테이너"클래스입니다.

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

바이올린을 보려면 여기를보십시오 : http://jsfiddle.net/D2RLR/7788/

2019 업데이트-부트 스트랩 4

"중심 컨텐츠"는 많은 다른 것을 의미 할 수 있으며, 부트 스트랩 중심화는 원래 게시물 이후로 많이 변경되었습니다.

수평 중심

부트 스트랩 3

• text-centerdisplay:inline요소에 사용됩니다
• center-block 중심으로 display:block요소
• col-*offset-* 그리드 열을 중심으로
• 네비게이션 바를 중앙에 배치하려면 이 답변 을 참조하십시오

데모 부트 스트랩 3 수평 센터링

부트 스트랩 4

• text-center 여전히 사용됩니다 display:inline 요소에
• mx-autocenter-block센터로 교체display:block 요소로
• offset-* 또는 mx-auto 그리드 열을 중앙에 배치하는 데 사용할 수 있습니다
• justify-content-center에서 row중심에 사용할 수 있습니다col-*

mx-auto(자동 X 축 마진) 중앙 것 display:block또는 display:flex요소가 한정된 폭 ( %, vw, px, 등). Flexbox가 기본적으로 사용됩니다 그리드 열에 으로 되므로 다양한 flexbox 센터링 방법도 있습니다.

데모 부트 스트랩 4 수평 센터링

수직 중심

Bootstrap 4는 기본적으로 flexbox이므로 세로 정렬에는 auto-margins , flexbox utils 또는 display utils 와 vertical align utils를 사용하는 다양한 방법이 있습니다. 처음에는 "수직 정렬 유틸리티"가 명백해 보이지만 인라인 및 테이블 표시 요소 에서만 작동합니다. 다음은 부트 스트랩 4 수직 센터링 옵션입니다.

1-자동 여백을 사용한 수직 중심 :

수직으로 가운데에 놓는 또 다른 방법은을 사용하는 것 my-auto입니다. 컨테이너 내부의 요소를 중앙에 배치합니다. 예를 들어 h-100행을 전체 높이로 만들고 열 my-auto을 세로로 가운데에 col-sm-12맞 춥니 다.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

자동 여백 데모를 사용한 수직 센터

my-auto 세로 y 축의 여백을 나타내며 다음과 같습니다.

margin-top: auto;
margin-bottom: auto;

2-Flexbox가있는 수직 중심 :

Bootstrap 4 .row가 이제 열에 수직으로 가운데에 display:flex놓기 만하면 align-self-center됩니다 ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

또는 align-items-center전체 .row를 사용 col-*하여 행의 모든 것을 세로로 가운데 정렬하십시오 ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

수직 중심 다른 높이 열 데모

3-디스플레이 유틸리티를 사용한 수직 중심 :

부트 스트랩 4 갖는 디스플레이 유틸 사용될 수 display:table, display:table-cell, display:inline, 등이이 함께 사용될 수있는 수직 배향 유틸 정렬 인라인으로, 인라인 블록 또는 테이블 셀 소자.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

디스플레이 유틸리티 데모를 사용한 수직 센터

부트 스트랩 3.1.1 에는 .center-blockdiv를 센터링 하는 클래스가 있습니다. http://getbootstrap.com/css/#helper-classes-center를 참조하십시오 .

컨텐츠 블록 display: block중심 요소를 중심으로 설정합니다 margin. 믹스 인 및 클래스로 제공됩니다.

<div class="center-block">...</div>

또는 다른 사람들이 이미 말했듯이 .text-center클래스를 사용하여 텍스트를 가운데에 맞 춥니 다.

이를 수행하는 가장 좋은 방법은 CSS 스타일을 정의하는 것입니다.

.centered-text {
    text-align:center
}    

그런 다음 중앙 텍스트가 필요한 곳에 다음과 같이 추가하십시오.

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

또는 p 태그를 중앙에 배치하려는 경우 :

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

인라인 CSS가 적을수록 더 좋습니다.

.show-grid 클래스는 링크의 예제에서 중심 정렬 텍스트를 적용합니다.

언제든지 style="text-align:center"행 div 또는 다른 클래스에 추가 할 수 있습니다 .

2013 년 2 월 현재 "span"div에 "centred"클래스를 추가합니다.

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

CSS로 :

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

그 이유는 span * div가 왼쪽으로 부동되고 "자동 여백"센터링 기술이 div가 부동되지 않은 경우에만 작동하기 때문입니다.

데모 (JSFiddle) : http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle : http://jsfiddle.net/5RpSh/8/

Bootstrap 3을 사용하는 경우 .text-center 라는 내장 CSS 클래스도 있습니다 . 그것이 당신이 원하는 것입니다.

<div class="text-left">
    left
</div>

<div class="text-center">
    center
</div>

<div class="text-right">
    right
</div>

jsfiddle의 예제를 참조하십시오. http://jsfiddle.net/ucheng/Q4Fue/

부트 스트랩 2.3에는 text-center클래스가 있습니다.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

내 편 CSS에서는 사용할 준비가되고 기억하기 쉬운 새로운 스타일을 정의합니다 .

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

좋은 생각입니까? 이것에 대한 좋은 연습이 있습니까?

Bootstrap 2.0 이상을 사용하는 경우

이것은 div를 페이지 중앙에 만들 수 있습니다.

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>

텍스트 정렬 유틸리티 클래스는 트릭을 수행합니다. 부트 스트랩은 .text-center오랫동안 텍스트를 중심에 배치하기 위해 클래스를 사용 하고 있습니다.

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

또는 자신 만의 유틸리티를 만들 수 있습니다. 몇 년 동안 내가 본 몇 가지 변형 :

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }

당신은 조정해야합니다 .span .

예:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"></div>
    <!--/span-->
    <div class="span4" align="center">
      <div class="hero-unit" align="center">
        <h3>Sign In</h3>
        <form>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-envelope"></i> </span>
            <input class="span6" type="text" placeholder="Email address">
          </div>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-key"></i> </span>
            <input class="span6" type="password" placeholder="Password">
          </div>
        </form>
      </div>
    </div>
    <!-- /span -->
    <div class="span4"></div>
  </div>
  <!-- /row -->
</div>

응답 성 (모바일 호환성)을 유지하면서 정보 블록 span1을 중앙 에 배치하기 위해 선호하는 방법은 중앙에 놓고 싶은 콘텐츠 전후에 두 개의 빈 div 를 배치 하는 것입니다.

<div class="row-fluid">

    <div class="span1">
    </div>

        <div class="span10">
          <div class="hero-unit">
            <h1>Reading Resources</h1>
            <p>Read here...</p>
          </div>
        </div><!--/span-->

    <div class="span1">
    </div>

</div><!--/row-->

Bootstrap 버전 3.1.1 이상에서 컨텐츠를 중앙에 배치하는 데 가장 적합한 클래스는 .center-block도우미 클래스입니다.

<div class="container">
  <div class="col-md-12 centered">
    <div class="row">
      <div class="col-md-1"></div>
       <div class="col-md-10">
           label
       </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</div>

메인에 용기 액을 사용하지 마십시오.

센터 블록은 위의 답변에서 언급되지 않은 옵션입니다.

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

모든 수업 center-block 는 요소에 0 여백을 갖도록 지시하고, 자동은 왼쪽 / 오른쪽 여백입니다. 그러나 클래스 text-center 또는 css text-align : center; 요소가 부모에 설정되어 있으면 요소가이 자동 계산을 수행 할 지점을 알지 못하므로 예상대로 중앙에 위치하지 않습니다.

따라서 텍스트 센터가 더 나은 옵션입니다.

아래 유형 중 하나를 사용할 수 있습니다

1. 부트 스트랩 기존 클래스 사용 text-center .
2. 사용자 지정 스타일을 추가 style = "text-align:center".

3. 열 오프셋을 사용하십시오.

   예: <div class="col-md-offset-6 col-md-12"></div>

반응 형 기능을 유지하면서 화면 크기에 관계없이 중심을 유지하기 위해이 클래스를 만들었습니다.

.container {
    alignment-adjust: central;
}

원하는 div 또는 태그에 텍스트 중심 클래스를 사용하십시오. 나는 그것이 잘 작동 할 수 있다고 생각합니다. 텍스트 정렬 센터를위한 Bootstrap 클래스입니다.

다음은 텍스트 정렬 부트 스트랩 클래스입니다.

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>

나는 두 가지 방법을 시도했지만 div의 중심을 잡는 데 효과적이었습니다. 두 방법 모두 모든 화면에서 div를 정렬합니다.

방법 1 : 푸시 사용 :

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
  </div>

방법 2 : 오프셋 사용 :

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

결과:

설명

부트 스트랩은 지정된 화면 점유의 첫 번째 열인 왼쪽으로 지정됩니다. 오프셋을 사용하거나 푸시하면 'this'열을 'those'많은 열만큼 이동합니다. 오프셋의 응답성에 몇 가지 문제가 있었지만 푸시는 훌륭했습니다.

2018 업데이트 :

Bootstrap 4.1.3 에서는 class를 사용하여 컨텐츠를 중앙에 배치 할 수 있습니다 mx-auto.

<div class="mx-auto">
  Centered element
</div>

참조 : https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering