Menyejajarkan float: div kiri ke tengah?

Saya ingin sekelompok gambar ditampilkan secara horizontal di seluruh halaman. Setiap gambar memiliki beberapa tautan di bawahnya jadi saya perlu meletakkan wadah di sekitar setiap gambar / grup tautan.

Yang paling dekat dengan apa yang saya inginkan adalah menempatkannya di div yang mengambang: kiri. Masalahnya adalah saya ingin wadah sejajar tengah bukan kiri. Bagaimana saya bisa mencapai ini.

gunakan display:inline-block;sebagai pengganti float

Anda tidak dapat menempatkan pelampung di tengah, tetapi pusat blok-sebaris seolah-olah itu adalah teks, jadi pada penampung keseluruhan luar dari "baris" Anda - Anda akan mengaturnya text-align: center;kemudian untuk setiap wadah gambar / teks (itu yang akan inline-block;) Anda dapat -menyelaraskan teks ke kiri jika Anda membutuhkan

CSS Flexbox didukung dengan baik hari ini. Buka di sini untuk tutorial yang bagus tentang flexbox.

Ini berfungsi dengan baik di semua browser yang lebih baru:

#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>

Beberapa orang mungkin bertanya mengapa tidak menggunakan display: inline-block? Untuk hal-hal sederhana tidak masalah, tetapi jika Anda mendapatkan kode kompleks di dalam blok, tata letak mungkin tidak lagi berada di tengah dengan benar. Flexbox lebih stabil daripada float kiri.

coba seperti ini:

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

Cukup bungkus elemen mengambang di a <div>dan berikan CSS ini:

.wrapper {

display: table;
margin: auto;

}

Mungkin ini yang Anda cari - 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;
}