Làm thế nào để bạn có được nội dung trung tâm bằng cách sử dụng Twitter Bootstrap?

Tôi đang cố gắng làm theo một ví dụ rất cơ bản. Sử dụng trang khởi động và hệ thống lưới , tôi đã hy vọng như sau:

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

... sẽ tạo ra văn bản trung tâm.

Tuy nhiên, nó vẫn xuất hiện ở phía bên trái. Tôi đang làm gì sai?

Đây là cho Trung tâm văn bản ( đó là những gì câu hỏi về )

Đối với các loại nội dung khác, xem câu trả lời của Flavien .

Cập nhật: Bootstrap 2.3.0+ Trả lời

Câu trả lời ban đầu là cho một phiên bản đầu tiên của bootstrap. Kể từ bootstrap 2.3.0, bạn chỉ cần cung cấp cho div lớp.text-center .

Câu trả lời gốc (trước 2.3.0)

Bạn cần định nghĩa một trong hai lớp rowhoặc span12bằng a text-align: center. Xem http://jsfiddle.net/xKSUH/ hoặc http://jsfiddle.net/xKSUH/1/

LƯU Ý: điều này đã bị xóa trong Bootstrap 3 .

Pre-Bootstrap 3, bạn có thể sử dụng lớp CSS pagination-centerednhư thế này:

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

Lớp pagination-centeredđã có trong bootstrap.css (hoặc bootstrap.min.css) và có một quy tắc duy nhất:

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

Với Bootstrap 2.3.0. chỉ sử dụng lớp họctext-center

Tôi đoán hầu hết những người ở đây đang thực sự tìm kiếm cách tập trung vào toàn bộdiv và không chỉ nội dung văn bản (mà là tầm thường).

Cách thứ hai (thay vì sử dụng text-align: centre) để căn giữa mọi thứ trong HTML là có một phần tử có độ rộng và lề tự động cố định (trái và phải). Với Bootstrap, kiểu xác định lề tự động là lớp "container".

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

Hãy xem ở đây cho một fiddle: http://jsfiddle.net/D2RLR/7788/

Cập nhật 2019 - Bootstrap 4

"Nội dung trung tâm" có thể có nghĩa là nhiều thứ khác nhau và định tâm Bootstrap đã thay đổi rất nhiều kể từ bài đăng gốc.

Trung tâm ngang

Bootstrap 3

• text-centerđược sử dụng cho display:inlinecác yếu tố
• center-blockđến display:blockcác yếu tố trung tâm
• col-*offset-* đến cột lưới trung tâm
• xem câu trả lời này để tập trung vào thanh điều hướng

Demo Bootstrap 3 Định tâm ngang

Bootstrap 4

• text-centervẫn được sử dụng cho display:inlinecác yếu tố
• mx-autothay thế center-blockcho display:blockcác yếu tố trung tâm
• offset-* hoặc mx-auto có thể được sử dụng để cột trung tâm
• justify-content-centertrong rowcũng có thể được sử dụng để trung tâmcol-*

mx-auto(lề tự động trục x) sẽ tập trung display:blockhoặc display:flexnguyên tố có chiều rộng định nghĩa , ( %, vw, px, vv ..). Flexbox được sử dụng theo mặc định trên các cột lưới, do đó cũng có các phương pháp định tâm flexbox khác nhau.

Demo Bootstrap 4 Định tâm ngang

Trung tâm dọc

Giờ đây, Bootstrap 4 là flexbox theo mặc định, có nhiều cách tiếp cận khác nhau để căn chỉnh theo chiều dọc bằng cách sử dụng: lề tự động , dụng cụ flexbox hoặc các tiện ích hiển thị cùng với các tiện ích căn chỉnh dọc . Lúc đầu "tiện ích căn chỉnh dọc" có vẻ rõ ràng nhưng chúng chỉ hoạt động với các yếu tố hiển thị nội tuyến và bảng. Dưới đây là một số tùy chọn định tâm dọc Bootstrap 4 ..

1 - Trung tâm dọc sử dụng lề tự động:

Một cách khác để trung tâm theo chiều dọc là sử dụng my-auto. Điều này sẽ tập trung vào phần tử trong thùng chứa của nó. Ví dụ: h-100làm cho hàng đầy đủ chiều cao và my-autosẽ căn giữa col-sm-12cột.

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

Vertical Center Sử dụng Auto Margins Demo

my-auto đại diện cho lề trên trục y dọc và tương đương với:

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

2 - Trung tâm dọc với Flexbox:

Vì Bootstrap 4 .rowbây giờ, display:flexbạn chỉ cần sử dụng align-self-centertrên bất kỳ cột nào để căn giữa theo chiều dọc ...

       <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>

hoặc, sử dụng align-items-centertrên toàn bộ .rowtrung tâm theo chiều dọc, sắp xếp tất cả col-*trong hàng ...

       <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>

Vertical Center Cột khác nhau Chiều cao Demo

3 - Trung tâm dọc sử dụng các tiện ích hiển thị:

Bootstrap 4 có utils hiển thị có thể được sử dụng cho display:table, display:table-cell, display:inline, vv .. Đây có thể được sử dụng với các utils kết theo chiều dọc để inline class, inline-block hoặc các yếu tố ô trong bảng.

<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>

Trung tâm dọc sử dụng Display Utils Demo

Bootstrap 3.1.1 có một .center-blocklớp để định tâm div. Xem: http://getbootstrap.com/css/#helper-groupes-center .

Các khối nội dung trung tâm Đặt một thành phần display: blockvà trung tâm thông qua margin. Có sẵn như là một mixin và lớp.

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

Hoặc, như những người khác đã nói, sử dụng .text-centerlớp để căn giữa văn bản.

Cách tốt nhất để làm điều này là xác định kiểu css:

.centered-text {
    text-align:center
}    

Sau đó, bất cứ khi nào bạn cần văn bản trung tâm, bạn thêm nó như vậy:

<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>

hoặc nếu bạn chỉ muốn thẻ p làm trung tâm:

<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 càng ít nội tuyến bạn sử dụng càng tốt.

Lớp .show-lưới đang áp dụng văn bản căn chỉnh trung tâm trong ví dụ trong liên kết.

Bạn luôn có thể thêm style="text-align:center"vào div hàng của bạn hoặc một số lớp khác tôi sẽ nghĩ.

Kể từ tháng 2 năm 2013, trong một số trường hợp, tôi thêm một lớp "chính giữa" vào div "span":

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

và đến CSS:

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

Lý do cho điều này là do nhịp * div được thả sang bên trái và kỹ thuật định tâm "lề tự động" chỉ hoạt động nếu div không được thả nổi.

Bản trình diễn (trên JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

Mã nguồn: http://jsfiddle.net/5RpSh/8/

Nếu bạn sử dụng Bootstrap 3, nó cũng có lớp CSS tích hợp có tên .text-centre . Đó là những gì bạn muốn.

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

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

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

Xin vui lòng xem ví dụ trong jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/

Bootstrap 2.3 có một text-centerlớp.

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

Về phía tôi, tôi xác định các CSSkiểu mới đã sẵn sàng để sử dụng và dễ nhớ:

.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;}

Nó là một ý tưởng tốt? Có thực hành tốt cho việc này?

Nếu bạn đang sử dụng Bootstrap 2.0+

Điều này có thể làm cho div tập trung vào trang.

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

Bất kỳ lớp tiện ích sắp xếp văn bản sẽ thực hiện các mẹo. Bootstrap đã được sử dụng .text-centerlớp để định tâm văn bản trong một thời gian dài bây giờ.

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

Hoặc bạn có thể tạo các tiện ích của riêng bạn. Một số biến thể tôi đã thấy trong những năm qua:

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

Bạn cần điều chỉnh với .span.

Thí dụ:

<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>

Phương pháp ưa thích của tôi để định tâm các khối thông tin trong khi duy trì khả năng phản hồi (khả năng tương thích với thiết bị di động) là đặt hai span1div trống trước và sau nội dung bạn muốn đặt chính giữa.

<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-->

Đối với Bootstrap phiên bản 3.1.1 trở lên, lớp tốt nhất để định tâm nội dung là .center-blocklớp trình trợ giúp.

<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>

Không sử dụng chất lỏng chứa trong chính.

Khối trung tâm cũng là một tùy chọn không được đề cập trong các câu trả lời ở trên

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

Tất cả các lớp center-blocklàm là để cho phần tử có lề 0 tự động, tự động là lề trái / phải. Tuy nhiên, trừ khi lớp văn bản trung tâm hoặc văn bản css-align: centre; được đặt trên cha mẹ, phần tử không biết điểm để thực hiện phép tính tự động này từ đó, vì vậy nó sẽ không tập trung vào chính nó như dự đoán.

Vì vậy, trung tâm văn bản là một lựa chọn tốt hơn.

Bạn có thể sử dụng bất kỳ một trong các loại dưới đây

1. Sử dụng lớp Bootstrap hiện có text-center.
2. Thêm một phong cách tùy chỉnh style = "text-align:center",.

3. Sử dụng một cột bù:

   Thí dụ: <div class="col-md-offset-6 col-md-12"></div>

Tôi đã tạo lớp này để giữ trung tâm bất kể kích thước màn hình trong khi vẫn duy trì các tính năng đáp ứng:

.container {
    alignment-adjust: central;
}

Chỉ cần sử dụng một lớp, trung tâm văn bản, cho div hoặc thẻ mà bạn muốn. Tôi nghĩ rằng nó có thể hoạt động tốt. Nó là một lớp Bootstrap cho trung tâm căn chỉnh văn bản.

Dưới đây là một số liên kết văn bản Các lớp 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>

Tôi đã thử hai cách, và nó hoạt động tốt để tập trung vào div. Cả hai cách sẽ sắp xếp các div trên tất cả các màn hình.

Cách 1: Sử dụng Đẩy:

<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>

Cách 2: Sử dụng Offset:

<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>

Kết quả:

Giải trình

Bootstrap sẽ chỉ định ở bên trái, cột đầu tiên của chiếm chỗ màn hình được chỉ định. Nếu chúng ta sử dụng bù hoặc đẩy, nó sẽ dịch chuyển cột 'này' theo 'nhiều cột' đó. Mặc dù tôi phải đối mặt với một số vấn đề về khả năng đáp ứng của bù đắp, đẩy là tuyệt vời.

Cập nhật 2018:

Trong Bootstrap 4.1.3 , nội dung có thể được căn giữa bằng lớp mx-auto.

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

Tham khảo: https://getbootstrap.com/docs/4.1/utilities/spaces/#horizontal-centering