Làm thế nào để căn giữa một div với Bootstrap2?

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

Tôi đã thử giống như tất cả các kết hợp:

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

hoặc là

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

đã thay đổi số nhịp và số bù ...

Nhưng tôi không thể nhận được một hộp đơn giản được căn giữa một cách hoàn hảo trên một trang :(

Tôi chỉ muốn một hộp rộng 6 cột có tâm ...

đã làm nó với

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

Nhưng hộp rộng quá, có cách nào làm với span7 được không?

span7 offset2cung cấp thêm phần đệm cho phần span7 offset3đệm bổ sung bên trái ở bên phải ...

bên cạnh việc thu hẹp div tự với kích thước bạn muốn, bằng cách giảm kích thước khoảng như vậy ... class="span6 offset3", class="span4 offset4", vv ... một cái gì đó đơn giản như style="text-align: center"trên div có thể có tác dụng bạn đang tìm kiếm

bạn không thể sử dụng span7 với bất kỳ khoảng cách nào đã đặt và lấy khoảng cách ở giữa trang (Vì tổng số nhịp = 12)

Các nhịp của Bootstrap được đưa sang bên trái. Tất cả những gì cần để căn giữa chúng là ghi đè hành vi này. Tôi thực hiện việc này bằng cách thêm cái này vào biểu định kiểu của mình:

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

Nếu bạn đã xác định lớp này, chỉ cần thêm nó vào khoảng và bạn đã sẵn sàng.

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

Lưu ý rằng lớp trung tâm tùy chỉnh này phải được xác định sau css bootstrap. Bạn có thể sử dụng !importantnhưng điều đó không được khuyến khích.

Bootstrap3 có .center-blocklớp mà bạn có thể sử dụng. Nó được định nghĩa là

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

Tài liệu tại đây .

Nếu bạn muốn khởi động đầy đủ (chứ không phải tự động sang trái / phải), bạn cần một mẫu vừa với 12 cột, ví dụ: 2 ô trống, 8 nội dung, 2 ô trống. Đó là những gì thiết lập này sẽ làm. Nó chỉ bao gồm các biến thể -md- , tôi có xu hướng chỉnh nó thành kích thước đầy đủ cho nhỏ bằng cách thêm col-xs-12

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

Có vẻ như bạn chỉ muốn căn giữa một vùng chứa. Khung bootstrap có thể quá phức tạp, ví dụ đó, bạn có thể có một div độc lập với kiểu dáng của riêng bạn, giống như:

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

và phong cách:

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

Điều đó sẽ hoạt động tốt nếu bạn được lồng ở đâu đó trong một .containerdiv bootstrap .

thêm nội dung trung tâm của lớp học

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

Mã @ZuhaibAli có tác dụng với tôi nhưng tôi đã thay đổi nó một chút:

Tôi đã tạo một lớp mới trong css

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

sau đó div trở thành

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

Tôi đã thêm col-md-6 cho chiều rộng của chính div, trong tình huống này có nghĩa là div có kích thước bằng một nửa, có 1 -12 col md trong bootstrap.

Làm theo hướng dẫn này https://getbootstrap.com/docs/3.3/css/

Sử dụng .center-block

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

bọc div trong một div cha với lớp rowsau đó thêm kiểu margin:0 auto;vào div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>