Menyejajarkan float: div kiri ke tengah?

97

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.

html css

— Mike
sumber

218

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

— clairesuzy
sumber

3

Untuk berjaga-jaga jika ada orang yang kesulitan dengan spasi yang muncul di antara elemen, hapus spasi dalam kode Anda dengan mendefinisikan elemen Anda seperti '<img> </img> <img> </img>' atau '<img> < / img> <! - Komentar -> <img> </img> '.

— Maarten

1

Atau atur elemen induk font-size:0dan pulihkan pada anak. Atau gunakan letter-spacing:-.31empada orang tua dan letter-spacing:0anak.

— Mike Causer

@Baumr Gunakan flexbox sebagai gantinya. Ada contohnya di bawah ini .

— Jan Derk

3

Anda mungkin perlu menambahkan vertical-align:middlesaat menggunakan display:inline-block.

— ibsenv

47

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>

Luaskan cuplikan

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.

— Jan Derk
sumber

Ini berfungsi untuk memusatkan secara horizontal. Bagaimana kalau memusatkan secara vertikal juga?

— Cullub

Untuk memusatkan secara vertikal, beri tinggi wadah (mis. Height: 500px;) dan tambahkan align-items: center;

— Jan Derk

9

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>

— Lauw
sumber

9

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

.wrapper {

display: table;
margin: auto;

}

— goodpixels
sumber

1

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>

— Shaq
sumber

0

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

— Teoman shipahi
sumber