Memusatkan floating divs dalam div lain

142

Saya telah mencari pertanyaan lain dan, sementara masalah ini tampaknya mirip dengan beberapa orang lain, tidak ada yang saya lihat sejauh ini untuk mengatasi masalah yang saya alami.

Saya memiliki div yang berisi sejumlah div lainnya, yang masing-masing melayang ke kiri. Div ini masing-masing berisi foto dan keterangan. Yang saya inginkan hanyalah grup foto dipusatkan di dalam div yang berisi.

Seperti yang dapat Anda lihat dari kode di bawah ini, saya sudah mencoba menggunakan keduanya overflow:hiddendan margin:x autopada div induk, dan saya juga menambahkan clear:both(seperti yang disarankan dalam topik lain) setelah foto. Sepertinya tidak ada yang membuat perbedaan.

Terima kasih. Saya menghargai saran apa pun.

<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
    <h4>Section Header</h4>

    <div style="margin: 2em auto;">

        <div style="float: left; margin: auto 1.5em;">
            <img src="photo1.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo2.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo3.jpg" /><br />
             Photo Caption
        </div>

        <div style="clear: both; height: 0; overflow: hidden;"> </div>

    </div>

</div>
Darren
sumber
kemungkinan duplikat dari Bagaimana cara memusatkan elemen float?
TylerH
@ TylerH Bagaimana bisa? Lihat saja tanggal ketika ditanya. Sepertinya pertanyaan di tautan Anda adalah duplikat yang sebenarnya.
The Pragmatick
@ThePragmatick Karena itu orang memiliki dua kali lebih banyak pandangan, lebih banyak jawaban, lebih banyak (dan lebih baru) aktivitas, dan kata-katanya berfungsi sebagai pertanyaan kanonik yang lebih baik daripada yang ini.
TylerH

Jawaban:

266

Pertama, hapus floatatribut pada divs. Lalu, letakkan text-align: centerdi bagian luar utama div. Dan untuk batin div, gunakan display: inline-block. Mungkin juga bijak untuk memberi mereka lebar eksplisit juga.


<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</div>
Sampson
sumber
6
@ Darren: apakah Anda berhenti mengambang ketika Anda mencoba? Anda tidak akan dapat mencapai apa yang Anda inginkan selama Anda mengambang / kecuali / Anda menetapkan lebar tetap pada wadah pelampung.
Ken Browning
1
Oh ... saya salah. Menghapus pelampung tampak seperti itu mencapai apa yang saya inginkan. Saya tidak yakin saya mengerti mengapa, tapi ... Terima kasih banyak.
Darren
9
@ Darren, perhatikan dalam contoh kode saya, saya tidak termasuk mengambang;) Baca lebih hati-hati lain kali, itu akan menghemat frustrasi :) Senang Anda bisa menemukannya. Terus bekerja dengan baik, dan selamat datang di SO.
Sampson
2
Pendekatan ini mulai gagal ketika beberapa keterangan gambar cukup panjang untuk dibungkus dengan garis. Ada saran lain?
greg.kindel
3
Nevermind, menemukan bahwa masalah caption penghitungan baris bervariasi dapat diperbaiki dengan 'vertical-align: top'. =)
greg.kindel
33

Dengan Flexbox Anda dapat dengan mudah secara horizontal (dan vertikal) memusatkan anak yang melayang di dalam div.

Jadi jika Anda memiliki markup sederhana seperti ini:

<div class="wpr">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

dengan CSS:

.wpr
{
    width: 400px;
    height: 100px;
    background: pink;
    padding: 10px 30px;
}

.wpr span
{
    width: 50px;
    height: 50px;
    background: green;
    float: left; /* **children floated left** */
    margin: 0 5px;
}

(Ini HASIL (yang diharapkan - dan tidak diinginkan) )

Sekarang tambahkan aturan berikut ke pembungkus:

display: flex;
justify-content: center; /* align horizontal */

dan anak-anak yang melayang mendapatkan pusat selaras ( DEMO )

Hanya untuk bersenang-senang, untuk mendapatkan perataan vertikal juga cukup tambahkan:

align-items: center; /* align vertical */

DEMO

Danield
sumber
masih harus memeriksa kompatibilitas browser, tetapi ini tampaknya luar biasa!
low_rents
Anda juga bisa menggunakan display: inline alih-alih flex ke centering divs. Flex memiliki masalah dengan safari dan Opera.
KAMU
inline tidak bekerja untuk saya. Masalah dari solusi ini adalah bahwa kotak-kotak tidak pergi ke baris ke-2 jika mereka meluap lebar div. Jadi, Anda benar-benar mengubahnya menjadi sebuah meja ...
Pavel Jiri Strnad
10

Saya mencapai hal di atas menggunakan posisi relatif dan mengambang ke kanan.

Kode HTML:

<div class="clearfix">                          
    <div class="outer-div">
        <div class="inner-div">
            <div class="floating-div">Float 1</div>
            <div class="floating-div">Float 2</div>
            <div class="floating-div">Float 3</div>
        </div>
    </div>
</div>

CSS:

.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }

.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JSFiddle: http://jsfiddle.net/MJ9yp/

Ini akan bekerja di IE8 dan lebih tinggi, tetapi tidak lebih awal (kejutan, kejutan!)

Sayangnya, saya tidak ingat sumber metode ini, jadi saya tidak bisa memberikan kredit kepada penulis aslinya. Jika ada orang lain yang tahu, silakan kirim tautannya!

Kendolein
sumber
+1 Ini berfungsi dengan baik. Jawaban yang diterima tidak berhasil untuk saya. Ini menciptakan masalah perataan vertikal ...
TimH - Codidact
@ Timim Terlambat ke pesta, saya tahu, tetapi masalah penyelarasan vertikal dapat diperbaiki dengan menambahkan 'penyelarasan vertikal: atas' ke wadah
Alfie
Maaf, maksud saya div dalam, bukan wadah div *
Alfie
Ini hampir berfungsi sempurna. Item akan ke baris berikutnya jika melimpah, tetapi ketika mereka melakukannya mereka tidak terpusat.
Pavel Jiri Strnad
5

Solusi berikut ini tidak menggunakan blok inline. Namun, membutuhkan dua div pembantu:

  1. Konten melayang
  2. Helper batin melayang (membentang sebanyak konten)
  3. Helper bagian dalam didorong ke kanan 50% (sebelah kiri sejajar dengan pusat helper luar)
  4. Konten ditarik ke kiri 50% (pusatnya sejajar dengan kiri helper)
  5. Helper luar diatur untuk menyembunyikan overflow

.ca-outer {
  overflow: hidden;
  background: #FFC;
}
.ca-inner {
  float: left;
  position: relative;
  left: 50%;
  background: #FDD;
}
.content {
  float: left;
  position: relative;
  left: -50%;
  background: #080;
}
/* examples */
div.content > div {
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  background: #FFF;
}
ul.content {
  padding: 0;
  list-style-type: none;
}
ul.content > li {
  margin: 10px;
  background: #FFF;
}
<div class="ca-outer">
  <div class="ca-inner">
    <div class="content">
      <div>Box 1</div>
      <div>Box 2</div>
      <div>Box 3</div>
    </div>
  </div>
</div>
<hr>
<div class="ca-outer">
  <div class="ca-inner">
    <ul class="content">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
      <li>Suspendisse iaculis risus ut dapibus cursus.</li>
    </ul>
  </div>
</div>

Salman A
sumber
4

display: inline-block;tidak akan berfungsi di browser IE mana pun. Inilah yang saya gunakan.

// change the width of #boxContainer to 
// 1-2 pixels higher than total width of the boxes inside:

#boxContainer {         
    width: 800px; 
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#Box{
    width: 240px; 
    height: 90px;
    background-color: #FFF;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}
Abdulla Kaleem
sumber
3

Larutan:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Knowledge is Power</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            #outer {
                text-align:center;
                width:100%;
                height:200px;
                background:red;
            }
            #inner {
                display:inline-block;
                height:200px;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
        </div>
    </body>
</html>
Touhid Rahman
sumber
Solusi ini di luar topik. Bagian dalam harus mengapung: dibiarkan memenuhi persyaratan OP.
s15199d
1

Dalam kasus saya, saya tidak bisa mendapatkan jawaban oleh @ Sampson untuk bekerja untuk saya, paling-paling saya mendapat satu kolom yang dipusatkan pada halaman. Namun dalam prosesnya, saya belajar bagaimana float benar-benar bekerja dan menciptakan solusi ini. Pada intinya perbaikannya sangat sederhana tetapi sulit ditemukan sebagaimana dibuktikan oleh utas ini yang telah memiliki lebih dari 146 ribu tampilan pada saat posting ini tanpa menyebutkan.

Yang diperlukan hanyalah total jumlah lebar ruang layar yang akan ditempati tata letak yang diinginkan, lalu buat induk sama lebar dan terapkan margin: otomatis. Itu dia!

Elemen-elemen dalam tata letak akan menentukan lebar dan tinggi div "luar". Ambil setiap "myFloat" atau lebar atau tinggi elemen + batas + margin dan bantalannya dan tambahkan semuanya bersama-sama. Kemudian tambahkan elemen-elemen lain bersama-sama dengan cara yang sama. Ini akan memberi Anda lebar induk. Semuanya bisa berukuran agak berbeda dan Anda bisa melakukan ini dengan lebih sedikit atau lebih banyak elemen.

Mis. (Setiap elemen memiliki 2 sisi sehingga batas, margin, dan bantalan dapat dikalikan x2)

Jadi elemen yang memiliki lebar 10px, batas 2px, margin 6px, padding 3px akan terlihat seperti ini: 10 + 4 + 12 + 6 = 32

Kemudian tambahkan semua lebar total elemen Anda menjadi satu.

Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24

Dalam contoh ini lebar untuk div "luar" adalah 112.

.outer {
  /* floats + margins + borders = 270 */
  max-width: 270px;
  margin: auto;
  height: 80px;
  border: 1px;
  border-style: solid;
}

.myFloat {
    /* 3 floats x 50px = 150px */
    width: 50px;
    /* 6 margins x 10px = 60 */
    margin: 10px;
    /* 6 borders x 10px = 60 */
    border: 10px solid #6B6B6B;
    float: left;
    text-align: center;
    height: 40px;
}
<div class="outer">
  <div class="myFloat">Float 1</div>
  <div class="myFloat">Float 2</div>
  <div class="myFloat">Float 3</div>
</div>

dimmech
sumber
Ini jawaban yang saya cari, terima kasih. Bagaimana Anda menghitung px yang Anda butuhkan? Tidak jelas bagi saya.
SilverSurfer