Bootstrap: Cách căn giữa nội dung căn chỉnh bên trong cột?

Question

Kịch bản trường hợp sử dụng đơn giản là sử dụng hình ảnh hoặc bất kỳ nội dung nào khác bên trong cột Khởi động. Và thường thì nội dung này cần được căn giữa theo chiều ngang.

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4 col-md-4 col-lg-4 text-center"> 
      <img class="img-responsive" src="img/some-image.png" title="this image needs to be centered"> 
     </div> 
     <div class="col-sm-8 col-md-8 col-lg-8"> 
      some content not important at this moment 
     </div> 
    </div> 
</div> 

Trong phiên bản 3.1.0, thêm trung tâm văn bản lớp làm trung tâm hình ảnh bên trong cột. Nhưng tôi đã buộc phải chuyển sang phiên bản 3.3.4 để khắc phục một số vấn đề khác và hành vi này (trung tâm văn bản) hiện đã bị hỏng. Tôi bị bỏ lại với vấn đề làm thế nào để căn giữa một hình ảnh hoặc nội dung khác bên trong một cột. Tôi muốn tránh phải thêm lớp vào các phần tử có chứa vì đây là lỗi dễ bị hoặc yêu cầu div khác chứa div.

Answer 1

Bạn muốn căn giữa hình ảnh? Rất dễ, Bootstrap có hai lớp, .center-block và text-center.

Sử dụng hình ảnh trước đây trong trường hợp hình ảnh của bạn là yếu tố BLOCK, ví dụ: thêm lớp đáp ứng img vào img của bạn làm cho thành phần khối img. Bạn nên biết điều này nếu bạn biết cách điều hướng trong bảng điều khiển web và xem các kiểu được áp dụng cho một phần tử.

Bạn không muốn sử dụng lớp học? Không có vấn đề, đây là CSS bootstrap sử dụng. Bạn có thể tạo một lớp tùy chỉnh hoặc viết một quy tắc CSS cho phần tử để phù hợp với lớp Bootstrap.

// In case you're dealing with a block element apply this to the element itself 
.center-block { 
    margin-left:auto; 
    margin-right:auto; 
    display:block; 
} 

// In case you're dealing with a inline element apply this to the parent 
.text-center { 
    text-align:center 
} 

Answer 2

Bạn có thể thực hiện việc này bằng cách thêm div i.e. centerBlock. Và cung cấp thuộc tính này trong CSS để căn giữa hình ảnh hoặc bất kỳ nội dung nào. Đây là mã:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4 col-md-4 col-lg-4"> 
      <div class="centerBlock"> 
       <img class="img-responsive" src="img/some-image.png" title="This image needs to be centered"> 
      </div> 
     </div> 
     <div class="col-sm-8 col-md-8 col-lg-8"> 
      Some content not important at this moment 
     </div> 
    </div> 
</div> 


// CSS 

.centerBlock { 
    display: table; 
    margin: auto; 
}