Làm cách nào để căn chỉnh một trung tâm chết hình ảnh với bootstrap

Tôi đang sử dụng khung bootstrap và cố gắng lấy một hình ảnh tập trung theo chiều ngang mà không thành công ..

Tôi đã thử các kỹ thuật khác nhau như chia hệ thống 12 lưới thành 3 khối bằng nhau, vd

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Phương pháp đơn giản nhất để lấy hình ảnh làm trung tâm so với trang là gì?

Twitter Bootstrap v3.0.3 có một lớp: khối trung tâm

Khối nội dung trung tâm

Đặt một yếu tố để hiển thị: khối và trung tâm thông qua lề. Có sẵn như là một mixin và lớp.

Chỉ cần thêm một lớp .center-blocktrong imgthẻ, trông như thế này

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

Trong Bootstrap đã có kiểu gọi css .center-block

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

Bạn có thể xem một mẫu từ đây

Cách chính xác để làm điều này là

<div class="row text-center">
  <img ...>
</div>

Cập nhật 2018

Các center-blocklớp không còn tồn tại trong Bootstrap 4 . Để căn giữa một hình ảnh trong Bootstrap 4, hãy sử dụng mx-auto d-block...

<img src="..." class="mx-auto d-block"/>

Thêm 'khối trung tâm' vào hình ảnh dưới dạng lớp - không cần thêm css

<img src="images/default.jpg" class="center-block img-responsive"/>

Twitter bootstrap có một lớp tập trung: .pagination-centre

Nó làm việc cho tôi để làm:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

Css cho lớp là:

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

Bạn có thể sử dụng như sau. Nó hỗ trợ Bootstrap 3.x ở trên.

<img src="..." alt="..." class="img-responsive center-block" />

Giả sử không có gì khác ngoài hình ảnh, cách tốt nhất là sử dụng text-align: centertrong phần imggốc:

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

Biên tập

Như đã đề cập trong các câu trả lời khác, bạn có thể thêm lớp CSS bootstrap .text-centervào phần tử cha. Điều này thực hiện chính xác điều tương tự và có sẵn trong cả v2.3.3 và v3

Làm việc cho tôi. thử sử dụngcenter-block

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Tôi cần như vậy và ở đây tôi tìm thấy giải pháp:

https://stackoverflow.com/a/15084576/1140407

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

Bạn có thể sử dụng thuộc tính lề với lớp img bootstrap.

.name-of-class .img-responsive { margin: 0 auto; }

Có vẻ như chúng ta có thể sử dụng một tính năng HTML5 mới nếu phiên bản trình duyệt không phải là vấn đề:

trong tệp HTML:

<div class="centerBloc">
  I will be in the center
</div>

Và trong tệp CSS, chúng tôi viết:

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Và do đó, div có thể là trung tâm hoàn hảo trong trình duyệt.

Bạn nên sử dụng

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}

Tôi đang sử dụng justify-content-centerlớp để một hàng trong một container. Hoạt động tốt với Bootstrap 4.

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

Tôi đã tạo cái này và thêm vào Site.css.

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

Bạn có thể thay đổi CSS của giải pháp trước đây như sau:

.container, .row { text-align: center; }

Điều này nên tập trung tất cả các yếu tố trong cha mẹ divlà tốt.