Kayan div'leri başka bir div içinde merkezleme

Diğer soruları araştırdım ve bu sorun başkalarına benziyor olsa da, şimdiye kadar gördüğüm hiçbir şey yaşadığım sorunu ele alıyor gibi görünüyor.

Her biri solda yüzen bir dizi diğer div içeren bir div var. Bu div'lerin her biri bir fotoğraf ve resim yazısı içerir. Tek istediğim fotoğraf grubunun içeren div içinde ortalanması.

Aşağıdaki koddan da görebileceğiniz gibi, her ikisini de overflow:hiddenve margin:x autoüst div'de kullanmayı denedim clear:bothve fotoğraflardan sonra da (başka bir konuda önerildiği gibi) ekledim . Hiçbir şey fark etmez.

Teşekkür ederim. Herhangi bir öneri için teşekkür ederim.

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

İlk floatolarak, iç divkısımdaki özelliği kaldırın . Sonra text-align: centerana dış tarafa koyun div. Ve iç için divs, kullanımdisplay: inline-block . Onlara açık genişlikler vermek de akıllıca olabilir.

<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</div>

Flexbox ile kayan çocukları div içinde kolayca yatay (ve dikey olarak) ortalayabilirsiniz .

Yani böyle basit bir işaretlemeniz varsa:

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

CSS ile:

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

(Bu (beklenen - ve istenmeyen) SONUÇ )

Şimdi sargıya aşağıdaki kuralları ekleyin:

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

ve yüzen çocuklar hizalanmış merkeze ( DEMO) )

Sadece eğlence için, dikey hizalama elde etmek için şunları ekleyin:

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

DEMO

Yukarıda göreli konumlandırma ve sağa kayan kullanarak başardım.

HTML Kodu:

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

Bu, IE8 ve sonraki sürümlerde çalışacaktır, ancak daha önce değil (sürpriz, sürpriz!)

Bu yöntemin kaynağını maalesef hatırlamıyorum, bu yüzden orijinal yazara kredi veremiyorum. Başka biri bilirse, lütfen bağlantıyı gönderin!

Aşağıdaki çözüm satır içi blokları kullanmaz. Ancak, iki yardımcı div gerektirir:

1. İçerik kayan
2. İç yardımcı yüzer (içerik kadar uzanır)
3. İç yardımcı% 50 sağa itilir (sol dış yardımcı merkeziyle hizalanır)
4. İçerik% 50 sola çekilir (merkezi iç yardımcısının soluyla hizalanır)
5. Dış yardımcı taşmayı gizleyecek şekilde ayarlanmış

.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;IE tarayıcılarının hiçbirinde çalışmaz. İşte kullandığım.

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

Çözüm:

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

Benim durumumda, @ Sampson tarafından benim için çalışmak için cevap alamadım, en iyi sayfada merkezli tek bir sütun var. Ancak bu süreçte şamandıranın gerçekte nasıl çalıştığını öğrendim ve bu çözümü yarattım. Özünde düzeltme çok basit ama bu yazı sırasında sözünü etmeden 146k'tan fazla görüşe sahip olan bu iplik tarafından açıkça görülmesi zor.

Gereken tek şey, istenen mizanpajın kaplayacağı ekran alanı genişliği miktarını toplamak ve daha sonra üst öğeyi aynı genişlik yapmak ve kenar boşluğu: otomatik uygulamaktır. Bu kadar!

Yerleşimdeki öğeler "dış" div'in genişliğini ve yüksekliğini belirleyecektir. Her bir "myFloat" veya öğenin genişliğini veya yüksekliğini + kenarlıklarını + kenar boşluklarını ve dolgularını alın ve hepsini bir araya getirin. Ardından diğer öğeleri aynı şekilde bir araya getirin. Bu size ebeveyn genişliğini verecektir. Hepsi biraz farklı boyutlarda olabilir ve bunu daha az veya daha fazla elemanla yapabilirsiniz.

Örn. (Her elemanın 2 tarafı vardır, böylece kenarlık, kenar boşluğu ve dolgu x2 çarpılır)

Yani 10px, kenar 2px, kenar boşluğu 6px, dolgu 3px olan bir eleman şöyle görünür: 10 + 4 + 12 + 6 = 32

Ardından, öğenizin toplam genişliklerini bir araya getirin.

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

Bu örnekte, "dış" div için genişlik 112 olacaktır.

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