Căn giữa một cột bằng Twitter Bootstrap 3

1146

Làm cách nào để tôi căn giữa một div có kích thước một cột trong vùng chứa (12 cột) trong Twitter Bootstrap 3 ?

.centered {
  background-color: red;
}
<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>
Mở rộng đoạn trích

Tôi muốn một div, với một lớp .centeredđược tập trung trong container. Tôi có thể sử dụng một hàng nếu có nhiều divs, nhưng bây giờ tôi chỉ muốn a divvới kích thước của một cột ở giữa thùng chứa (12 cột).

Tôi cũng không chắc cách tiếp cận trên là đủ tốt vì ý định không bù đắp divmột nửa. Tôi không cần không gian trống bên ngoài divvà nội dung divthu nhỏ theo tỷ lệ. Tôi muốn để trống không gian bên ngoài div để được phân bổ đều (thu nhỏ cho đến khi chiều rộng của container bằng một cột).

css  twitter-bootstrap  twitter-bootstrap-3  centering 
— bsr
nguồn

Câu trả lời:

1963

Có hai cách tiếp cận để định tâm một cột <div>trong Bootstrap 3:

Cách tiếp cận 1 (bù đắp):

Cách tiếp cận đầu tiên sử dụng các lớp bù riêng của Bootstrap để nó không yêu cầu thay đổi đánh dấu và không cần thêm CSS. Điều quan trọng là đặt độ lệch bằng một nửa kích thước còn lại của hàng . Vì vậy, ví dụ, một cột có kích thước 2 sẽ được căn giữa bằng cách thêm phần bù 5, đó là (12-2)/2.

Trong đánh dấu, nó sẽ trông như sau:

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

Bây giờ, có một nhược điểm rõ ràng cho phương pháp này. Nó chỉ có tác dụng cho các kích cỡ cột thậm chí , vì vậy chỉ .col-X-2, .col-X-4, col-X-6, col-X-8, và col-X-10được hỗ trợ.

Cách tiếp cận 2 (cũ margin:auto)

Bạn có thể căn giữa bất kỳ kích thước cột bằng cách sử dụng margin: 0 auto;kỹ thuật đã được chứng minh . Bạn chỉ cần chăm sóc phần nổi được thêm vào bởi hệ thống lưới của Bootstrap. Tôi khuyên bạn nên xác định một lớp CSS tùy chỉnh như sau:

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

Bây giờ bạn có thể thêm nó vào bất kỳ kích thước cột nào ở bất kỳ kích thước màn hình nào và nó sẽ hoạt động trơn tru với bố cục đáp ứng của Bootstrap:

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

Lưu ý: Với cả hai kỹ thuật, bạn có thể bỏ qua .rowphần tử và đặt cột ở giữa .container, nhưng bạn sẽ nhận thấy sự khác biệt tối thiểu về kích thước cột thực tế do phần đệm trong lớp container.

Cập nhật:

Vì v3.0.1 Bootstrap có một lớp tích hợp có tên center-blocksử dụng margin: 0 auto, nhưng bị thiếu float:none, bạn có thể thêm nó vào CSS của mình để làm cho nó hoạt động với hệ thống lưới.

— koala_dev
nguồn
1
Tôi nghĩ rằng không có float: không có trong quy tắc khối trung tâm bởi vì có một quy tắc độc lập Clearfix mà bạn có thể thêm vào các phần tử để xóa float.
— Diego Fernando Murillo Valenci
7
@DiegoFernandoMurilloValenci .clearfixsẽ không hoạt động trong trường hợp này vì nó không xóa thuộc tính float trên các phần tử (cần thiết để tập trung vào sử dụng margin: 0 auto), nó chỉ làm cho một container chứa bất kỳ phần tử nổi nào bên trong
— koala_dev
4
không thể sử dụng điều này trên một cột, bởi vì khôngfloat:none;
— airtonix
2
Nếu bạn muốn tập trung nhiều hơn một cột trong một dòng, hãy xem câu trả lời này stackoverflow.com/questions/28683329/ Kẻ
— Conor Svensson
3
Cú pháp bù đắp đã thay đổi trong Bootstrap4 (kể từ phiên bản mới nhất). Sử dụng phản hồi này làm ví dụ: lớp col-md-offset-5 bây giờ sẽ là offset-md-5.
— lgant
296

Phương pháp ưa thích của các cột định tâm là sử dụng "offset" (nghĩa là col-md-offset-3:)

Ví dụ định tâm Bootstrap 3.x

Đối với các yếu tố định tâm , có một center-block lớp người trợ giúp .

Bạn cũng có thể dùng text-center để căn giữa văn bản (và các yếu tố nội tuyến).

Bản giới thiệu : http://bootply.com/91632

EDIT - Như đã đề cập trong các ý kiến,center-blockhoạt động trên nội dung cột vàdisplay:block thành phần của , nhưng sẽ không hoạt động trên chính cột ( col-*div) vì Bootstrap sử dụng float.

Cập nhật 2018

Bây giờ với Bootstrap 4 , các phương thức định tâm đã thay đổi ..

  • text-center vẫn được sử dụng cho display:inline cá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

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

Để định tâm dọc trong BS4, hãy xem https://stackoverflow.com/a/41464397/171456

— Zim
nguồn
31
Thật không may, lớp người trợ giúp này không hoạt động với hệ thống cột vì nó không chăm sóc thuộc tính float. Xem bản demo này chẳng hạn.
— koala_dev
13
Điều đó chỉ yêu cầu một khối trung tâm {float: none; }, Và nó hoạt động. bootply.com/122268
— Matias Vad
5
không chắc chắn về OP, nhưng tôi đã đến đây để tìm text-centerchi tiết - điều mà không câu trả lời nào khác được cung cấp. Điều này nhận được phiếu bầu của tôi.
— domoarigato 2/2/2015
1
không thể sử dụng điều này trên một cột, bởi vì khôngfloat:none;
— airtonix
98

Bây giờ Bootstrap 3.1.1 đang hoạt động với .center-block và lớp trình trợ giúp này hoạt động với hệ thống cột.

Bootstrap 3 Trung tâm trợ giúp lớp .

Vui lòng kiểm tra DEMO jsfiddle này :

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

Trung tâm trợ giúp lớp học

Trung tâm cột hàng sử dụng col-center-blocklớp người trợ giúp.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
— Người gửi
nguồn
Tôi đã làm việc này mà không cần thêm float:nonebằng cách đảm bảo khối trung tâm div có style="width : ?px"kiểu được áp dụng cho nó. Ví dụ chiều rộng hình ảnh. Hoạt động với 3.2.2
— Piotr Kula
lề: 0 tự động; - đủ thay vì lề trái / lề phải
— mmike
57

Chỉ cần thêm phần sau vào tệp CSS tùy chỉnh của bạn. Chỉnh sửa trực tiếp các tệp CSS Bootstrap không được khuyến nghị và hủy khả năng sử dụng CDN của bạn .

.center-block {
    float: none !important
}

Tại sao?

Bootstrap CSS (phiên bản 3.7 trở xuống) sử dụng lề: 0 auto; , nhưng nó bị ghi đè bởi thuộc tính float của container kích thước.

PS :

Sau khi bạn thêm lớp này, đừng quên thiết lập các lớp theo đúng thứ tự.

<div class="col-md-6 center-block">Example</div>
— SEO thông minh
nguồn
1
Tôi đang sử dụng Bootstrap 3.3.7và đây là phương pháp duy nhất phù hợp với tôi!
— illagrenan
1
những công việc này. nhưng đừng nghĩ !importantlà cần thiết
— Gianfranco P.
1
@GianfrancoP. P. Quyền của bạn, nhưng ... điều đó phụ thuộc vào thứ tự tải và tôi muốn cung cấp một phương pháp hoàn hảo.
— SEO Sagive
39

Bootstrap 3 hiện đã có lớp tích hợp sẵn cho việc này.center-block

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

Nếu bạn vẫn đang sử dụng 2.X thì chỉ cần thêm nó vào CSS của bạn.

— Khủng long
nguồn
điều này có thể sẽ cung cấp cho bạn hiệu quả mong muốn dễ dàng nhất. Đồng thời ném chiều rộng cho lớp .centered hoặc thêm lớp thứ hai nếu bạn muốn sử dụng phương pháp mô đun hơn
— Matt Lambert
2
Thêm float: none; đến .centered cho phép bạn chuyển lớp lên thành container. giữ mã sạch hơn
— Adam Patterson
7
không thể sử dụng cái này trên một cột, bởi vì khôngfloat:none;
— airtonix
37

Cách tiếp cận của tôi với các cột trung tâm là sử dụng display: inline-blockcho các cột và text-align: centercho cha mẹ chứa.

Bạn chỉ cần thêm lớp CSS 'căn giữa' vào row.

HTML:

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

CSS:

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

Mã thông báo: http://jsfiddle.net/steyffi/ug4fzcjd/

— Steffi
nguồn
2
Đây là câu trả lời duy nhất hoạt động 100% thời gian - Những câu hỏi khác hoạt động, nhưng không phải khi bootstrap chuyển sang chế độ xem trên thiết bị di động của nó (các mục được chuyển sang phía bên trái).
— Levi Fuller
Đây là cái duy nhất hoạt động tốt với tôi, .center-block chỉ hoạt động cho một cột và tôi cần phải căn giữa tất cả các cột độc lập với số lượng của nó.
— cjohansson
Chỉ có giải pháp làm việc cho tôi quá. Những cái khác chỉ hoạt động khi trình duyệt là một cửa sổ, (không phải toàn màn hình).
— kiwicomb123
26

Bootstrap phiên bản 3 có lớp .text-centre.

Chỉ cần thêm lớp này:

text-center

Nó chỉ đơn giản sẽ tải phong cách này:

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

Thí dụ:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>
— RustyIngles
nguồn
Làm rõ nơi lớp học này sẽ được thêm vào?
— aksu
Xin chào @aksu, bạn không phải thêm bất kỳ .css nào. Nhìn vào ví dụ được cung cấp.
— JoshYates1980
15

Những công việc này. Một cách hackish có thể, nhưng nó hoạt động độc đáo. Nó đã được thử nghiệm để đáp ứng (Y).

.centered {
    background-color: teal;
    text-align: center;
}

Máy tính để bàn

Phản ứng nhanh nhẹn

— Ali Gajani
nguồn
chỉ hoạt động vì các yếu tố có nội tuyến tốt nghiệp. An imgcó thể được đặt thành một khối.
— ProfileTwist
Có lẽ trong trường hợp thử nghiệm bị cô lập của bạn. Tôi sẽ thêm .centered img { display: inline; }vào câu trả lời của bạn và sau đó nó sẽ xứng đáng để bỏ phiếu thay thế.
— ProfileTwist
Không vấn đề gì. Tôi chắc chắn OP sẽ tìm thấy câu trả lời của anh ấy / cô ấy :)
— Ali Gajani
trong bootstrap 3, lớp .text-centre thực hiện điều tương tự nguyên bản, như tôi đã học ở trên.
— domoarigato 2/2/2015
7 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
— wali
nguồn
6

Để tập trung vào col- chúng ta cần sử dụng đoạn mã dưới đây. cols là yếu tố nổi bên cạnh tự động lề. Chúng tôi cũng sẽ thiết lập nó để nổi không,

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Để căn giữa col-lg-1 ở trên với lớp trung tâm, chúng tôi sẽ viết:

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

Để tập trung vào nội dung bên trong div, hãy sử dụng text-align:center,

.centered {
    text-align: center;
}

Nếu bạn chỉ muốn căn giữa nó trên màn hình và màn hình lớn hơn, không phải trên thiết bị di động, thì hãy sử dụng truy vấn phương tiện sau.

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

Và để tập trung div chỉ trên phiên bản di động, hãy sử dụng mã dưới đây.

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}
— Aamer Shahzad
nguồn
6

Chỉ cần đặt một cột của bạn hiển thị nội dung thành col-xs-12 (đầu tiên trên thiết bị di động ;-) và chỉ định cấu hình vùng chứa để kiểm soát mức độ rộng mà bạn muốn nội dung trung tâm của mình sẽ rộng, vì vậy:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}
<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
Mở rộng đoạn trích

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
Mở rộng đoạn trích

Để xem bản demo, hãy xem http://codepen.io/Kebten/pen/gpRNMe :-)

— Kieran Ryan
nguồn
6

Một cách tiếp cận khác của việc bù đắp là có hai hàng trống, ví dụ:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
— LeRoy
nguồn
1
2 div vô dụng, col-md-offset- * tốt hơn
— ymakux
1
Tôi đồng ý. Tôi đã sử dụng phương pháp đó bởi vì nó thực sự hoạt động tốt và được thử nghiệm.
— LeRoy
6

Bạn có thể sử dụng text-centercho hàng và có thể đảm bảo các div bên trong có display:inline-block(không có float).

Như:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

Và CSS:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

Câu đố: http://jsfiddle.net/DTcHh/3177/

— Alireza Fattahi
nguồn
6

Với bootstrap 4, bạn có thể thử một cách đơn giản justify-content-md-centernhư được đề cập ở đây

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

nhập mô tả hình ảnh ở đây

— Hossein Narimani Rad
nguồn
1
@AdamErickson Câu hỏi được hỏi cụ thể cho giải pháp bootstrap 3. Vì câu trả lời này có lẽ là cách để đi trong BS4, năm 2019 một số phần mềm vẫn đang sử dụng bootstrap 3.
— A1rPun
5

Đây có lẽ không phải là câu trả lời tốt nhất, nhưng có một giải pháp sáng tạo hơn cho vấn đề này. Như koala_dev đã chỉ ra, việc bù đắp cột chỉ hoạt động đối với các kích thước cột chẵn. Tuy nhiên, bằng cách lồng các hàng, bạn cũng có thể đạt được các cột không đồng đều.

Để gắn bó với câu hỏi ban đầu mà bạn muốn căn giữa cột 1 bên trong lưới 12.

  1. Căn giữa một cột 2 bằng cách bù nó 5
  2. Tạo một hàng lồng nhau, để bạn có được 12 cột mới bên trong 2 cột của mình.
  3. Vì bạn muốn căn giữa một cột 1 và 1 là "một nửa" của 2 (những gì chúng tôi tập trung ở bước 1), bây giờ bạn cần căn giữa một cột 6 trong hàng lồng nhau của bạn, điều này dễ dàng được thực hiện bằng cách bù đắp cho nó 3.

Ví dụ:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

Xem fiddle này , xin lưu ý rằng bạn phải tăng kích thước của cửa sổ đầu ra để xem kết quả, nếu không các cột sẽ bọc.

— nhắc nhở
nguồn
5

Đây không phải là mã của tôi, nhưng nó hoạt động hoàn hảo (đã được thử nghiệm trên Bootstrap 3) và tôi không phải loay hoay với col-offset.

Bản giới thiệu:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}
<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>
Mở rộng đoạn trích

— Binar Web
nguồn
4

Chúng ta có thể đạt được điều này bằng cách sử dụng cơ chế bố trí bảng:

Cơ chế là:

  1. Gói tất cả các cột trong một div.
  2. Làm cho div đó như một bảng với một bố cục cố định.
  3. Tạo mỗi cột dưới dạng một ô của bảng.
  4. Sử dụng thuộc tính dọc để điều khiển vị trí nội dung.

Bản demo mẫu ở đây

Nhập mô tả hình ảnh ở đây

— Mohan Dere
nguồn
4

Nối đoạn mã sau vào trong .row hoặc .col của bạn. Đây là cho Bootstrap 4 *.

d-flex justify-content-center
— Thomas Chirwa
nguồn
3

Như koala_dev đã sử dụng trong cách tiếp cận 1 của mình, tôi thích phương thức bù thay vì khối trung tâm hoặc lề có giới hạn sử dụng, nhưng như ông đã đề cập:

Bây giờ, có một nhược điểm rõ ràng cho phương pháp này, nó chỉ hoạt động với các kích thước cột chẵn, do đó, chỉ có .col-X-2, .col-X-4, col-X-6, col-X-8 và col-X- 10 được hỗ trợ.

Điều này có thể được giải quyết bằng cách sử dụng cách tiếp cận sau đây cho các cột lẻ.

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>
— Abhinav Singh
nguồn
3

Bạn có thể sử dụng flexbox giải pháp rất linh hoạt cho Bootstrap của bạn.

justify-content: center;

có thể tập trung vào cột của bạn.

Kiểm tra flex .

— Khắc nghiệt
nguồn
2

Bởi vì tôi không bao giờ có nhu cầu chỉ tập trung vào một .col-trong một .row, nên tôi đặt lớp sau vào gói .rowcác cột mục tiêu của mình.

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Thí dụ

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>
— Walter Roman
nguồn
2

Đối với những người muốn tập trung vào các thành phần cột trên màn hình khi bạn không có số chính xác để điền vào lưới của mình, tôi đã viết một đoạn JavaScript nhỏ để trả về tên lớp:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

Nếu bạn có 5 yếu tố và bạn muốn có 3 hàng trên một mdmàn hình, bạn làm điều này:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

Hãy ghi nhớ, đối số thứ hai phải được chia cho 12.

— tháng giêng
nguồn
2

Để căn giữa nhiều cột trong một hàng Bootstrap - và số lượng cols là số lẻ, chỉ cần thêm csslớp này vào tất cả các cột trong hàng đó:

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

Vì vậy, trong HTML của bạn, bạn có một cái gì đó như:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>
— Ruto Collins
nguồn
2

Thử cái này

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

Bạn có thể sử dụng khác colcũng như col-md-2, vv

— Ch UmarJamil
nguồn
2

Tôi đề nghị đơn giản là sử dụng lớp text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
— Bố Sourav
nguồn
2

Hãy thử mã này.

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Ở đây tôi đã sử dụng col-lg-1, và độ lệch phải là 10 để định tâm chính xác div trên các thiết bị lớn. Nếu bạn cần nó tập trung vào các thiết bị từ trung bình đến lớn thì chỉ cần thay đổi lg thành md, v.v.

— Bangash
nguồn
2

Giải pháp Bootstrap 4 :

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
— JanBrus
nguồn
1

Nếu bạn đặt cái này trên hàng của bạn, tất cả các cột bên trong sẽ được căn giữa:

.row-centered {
    display: flex;
    justify-content: space-between;
}
— Eran Shabi
nguồn
làm cho các yếu tố không đáp ứng.
— gfivehost 17/2/2017
1

Để chính xác hơn, hệ thống lưới của Bootstrap chứa 12 cột và tập trung vào bất kỳ nội dung nào, giả sử, nội dung chiếm một cột. Người ta sẽ cần chiếm hai cột lưới của Bootstrap và đặt nội dung lên một nửa của hai cột bị chiếm.

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5' đang báo cho hệ thống lưới nơi bắt đầu đặt nội dung.

'col-xs-2' đang cho hệ thống lưới biết có bao nhiêu cột còn lại trong nội dung.

'Trung tâm' sẽ là một lớp được xác định sẽ tập trung vào nội dung.

Đây là ví dụ này trông như thế nào trong hệ thống lưới của Bootstrap.

Cột:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

....... bù ....... .data. .......không được sử dụng........

— Công nghệ cao
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.