Twitter Bootstrap - cách tập trung các yếu tố theo chiều ngang hoặc chiều dọc

285

Có cách nào để căn giữa các phần tử html theo chiều dọc hoặc chiều ngang bên trong cha mẹ chính không?

css twitter-bootstrap

— tôi đây
nguồn

2

Đây là một bài viết tuyệt vời về định tâm theo chiều ngang và chiều dọc: Xem tại đây

— markvandencorput

2

Tôi cũng đã phải đối mặt với một vấn đề cho liên kết ngang; Tôi chỉ đơn giản sử dụng <center></center>thẻ

— Utpal - Ur Best Pal

4

@ Utpal-UrBestPal <center>thẻ đã bị từ chối khoảng 12 năm trước.

— Niels Keurentjes

246

Cập nhật : trong khi câu trả lời này có khả năng chính xác trở lại vào đầu năm 2013, thì nó không nên được sử dụng nữa. Các giải pháp thích hợp sử dụng offset .

Đối với đề xuất của người dùng khác, cũng có các lớp bootstrap riêng có sẵn như:

class="text-center"
class="pagination-centered"

cảm ơn @Henning và @trejder

— tôi đây
nguồn

22

Kiểu dáng chính xác tương tự đã có trong Bootstrap; chỉ cần sử dụngclass="text-center"

— Henning

3

Hoặc .pagination-centerednhư là một thay thế.

— trejder

7

Đây phải là câu trả lời, những câu hỏi khác bỏ qua toàn bộ phần 'trong bootstrap' của câu hỏi.

— Ryan McDonough

1

@RyanMcDonough yeah hiệu quả đây là riassuming tất cả những người khác đề nghị vì vậy tôi đã kiểm tra như câu trả lời ok?

— itsme

1

Sử dụng text-centerđể bố trí là thực hành rất xấu. Cách thích hợp để căn chỉnh các cột trong Bootstrap là sử dụng col-XX-offset-Ycác lớp. getbootstrap.com/css/#grid-offsding . Câu trả lời này có khả năng đúng vào năm 2013 nhưng không nên được sử dụng nữa ngày hôm nay.

— Niels Keurentjes

76

Từ tài liệu Bootstrap :

Đặt một yếu tố 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>

— m0000g
nguồn

55

Đối với khách truy cập trong tương lai cho câu hỏi này:

Nếu bạn đang cố gắng căn giữa một hình ảnh trong một div nhưng hình ảnh sẽ không ở giữa, điều này có thể mô tả vấn đề của bạn:

jsFiddle DEMO của vấn đề

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

Các img-responsivelớp học thêm một display:blockhướng dẫn để các thẻ hình ảnh, mà dừng lại text-align:center( text-centerlớp) từ làm việc.

GIẢI PHÁP:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

Thêm center-blocklớp ghi đè display:blockhướng dẫn đưa vào bằng cách sử dụng img-responsivelớp.

Không có img-responsivelớp, hình ảnh sẽ tập trung chỉ bằng cách thêm text-centerlớp

Cập nhật:

Ngoài ra, bạn nên biết những điều cơ bản về flexbox và cách sử dụng nó, vì Bootstrap4 hiện sử dụng nó một cách tự nhiên .

Dưới đây là một video hướng dẫn tuyệt vời, tốc độ nhanh của Brad Schiff

Đây là một cheat sheet tuyệt vời

— cssyphus
nguồn

32

Cập nhật 2018

Trong Bootstrap 4 , các phương thức định tâm đã thay đổi ..

Trung tâm ngang trong BS4

text-centervẫn được sử dụng cho display:inlinecác yếu tố
mx-autothay thế center-blockcho display:flextrẻ em 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

30

Bạn có thể trực tiếp ghi vào tập tin css của bạn như thế này:

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }

<div class = "content" >
  
   <p> some text </p>
  </div>

Mở rộng đoạn trích

— kirgiz_jigit
nguồn

9

tôi dùng cái này

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

— atabak
nguồn

1

Không hoạt động trong một số trường hợp nhất định (xem nhận xét về cơ bản cùng một câu trả lời và không sử dụng các lớp dành riêng cho Bootstrap để định tâm .

— Dan Dascalescu

7

để định tâm theo chiều ngang, bạn có thể có một cái gì đó như thế này:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

— Ba Tư
nguồn

4

Không hoạt động (ít nhất là không triển khai hiện tại), khi được sử dụng trực tiếp trong hình ảnh : <img src="img/logo.png" style="float:none; margin:0 auto" />. Xung quanh imgvới cha mẹ divvà cho .text-centerhoặc .pagination-centeredlớp học cho cha mẹ làm việc như một nét duyên dáng.

— trejder

2

để căn giữa một phần tử có lề: 0 tự động, bạn cần thêm chiều rộng cho phần tử đó. Trong ví dụ trên không có chiều rộng được chỉ định vì span8 có chiều rộng bằng boobstrap nhưng hình ảnh của bạn không như vậy <img src = "img / logo.png" style = "float: none; lề: 0 auto; width: 300px" /> sẽ căn giữa hình ảnh đó theo chiều ngang của cha mẹ

— Raul

2

Điều này bỏ qua phần "Bootstrap" của câu hỏi.

— Dan Dascalescu

5

Tôi thích giải pháp này từ một câu hỏi tương tự. https://stackoverflow.com/a/25036303/2364401 Sử dụng text-centerlớp bootstraps trên dữ liệu bảng thực tế <td>và <th>các thành phần tiêu đề bảng . Vì thế

<td class="text-center">Cell data</td>

và

<th class="text-center">Header cell data</th>

— cối xay xander
nguồn

5

Với bootstrap 4 bạn có thể sử dụng flex

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

nguồn: bootstrap 4.1

— alvseek
nguồn

3

bootstrap 4 + Flex giải quyết điều này

bạn có thể dùng

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

Mở rộng đoạn trích

nó nên tập trung vào trung tâm theo chiều ngang và chiều dọc

— taoufiqaitali
nguồn

0

Tôi phát hiện ra trong Bootstrap 4 bạn có thể làm điều này:

trung tâm ngang thực sự là text-centerđẳng cấp

trung tâm dọc tuy nhiên bằng cách sử dụng các lớp bootstrap là thêm cả hai mb-auto mt-autođể đáy lề và đáy lề được đặt thành tự động.

— Thomas trực tuyến
nguồn

0

cho trung tâm dọc bootstrap4 của một vài mặt hàng

d-flex cho các quy tắc flex

cột flex cho hướng dọc trên các mặt hàng

justify-content-centre để định tâm

kiểu = 'chiều cao: 300px;' phải có các điểm đặt trong đó trung tâm là calc hoặc sử dụng lớp h-100

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div>

— Ramil Gilfanov
nguồn