Memusatkan floating divs dalam div lain

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>

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>

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

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!

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>

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

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>

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>