Căn chỉnh một float: div trái sang giữa?

Tôi muốn có một nhóm hình ảnh hiển thị theo chiều ngang trên trang. Mỗi hình ảnh có một vài liên kết bên dưới vì vậy tôi cần đặt một vùng chứa xung quanh mỗi hình ảnh / nhóm liên kết.

Gần nhất tôi đã đạt được những gì tôi muốn là đặt chúng vào divs float: left. Vấn đề là tôi muốn các thùng chứa căn chỉnh giữa không bên trái. Làm thế nào tôi có thể đạt được điều này.

sử dụng display:inline-block;thay vì phao

bạn không thể căn giữa các khối nổi, nhưng các khối nội tuyến căn giữa như thể chúng là văn bản, vì vậy, trên vùng chứa tổng thể bên ngoài của "hàng" của bạn - bạn sẽ đặt text-align: center;sau đó cho mỗi vùng chứa hình ảnh / chú thích (đó là những thứ sẽ là inline-block;), bạn có thể - căn chỉnh văn bản sang trái nếu bạn yêu cầu

CSS Flexbox ngày nay được hỗ trợ tốt . Truy cập vào đây để xem hướng dẫn tốt về flexbox.

Điều này hoạt động tốt trong tất cả các trình duyệt mới hơn:

#container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>    
  <div class="block">4</div>    
  <div class="block">5</div>        
</div>

Một số người có thể hỏi tại sao không sử dụng display: inline-block? Đối với những thứ đơn giản thì không sao, nhưng nếu bạn có mã phức tạp trong các khối, bố cục có thể không được căn giữa chính xác nữa. Flexbox ổn định hơn float left.

hãy thử nó như thế này:

  <div id="divContainer">
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <br class="clear" />
    </div>

    <style type="text/css">
    #divContainer { margin: 0 auto; width: 800px; }
    .divImageHolder { float:left; }
    .clear { clear:both; }
    </style>

Chỉ cần bọc các phần tử nổi trong một <div>và cung cấp cho nó CSS ​​này:

.wrapper {

display: table;
margin: auto;

}

Có lẽ đây là thứ bạn đang tìm kiếm - https://www.w3schools.com/css/css3_flexbox.asp

CSS:

#container {
  display:                 flex;
  flex-wrap:               wrap;
  justify-content:         center;
}

.block {
  width:              150px;
  height:             150px;
  margin:             10px;        
}

HTML:

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>          
</div>

.contentWrapper {
    float: left;
    clear: both;
    margin-left: 10%;
    margin-right: 10%;
}

.repeater {
    height: 9em;
    width: 9em;
    float: left;
    margin: 0.2em;
    position: relative;
    text-align: center;
    cursor: pointer;
}