การจัดศูนย์กลาง divs ที่ลอยอยู่ภายใน div อื่น

ฉันค้นหาคำถามอื่นแล้วและในขณะที่ปัญหานี้ดูเหมือนกับคำถามอื่น ๆ อีกสองเรื่อง แต่ฉันก็ยังไม่เห็นอะไรเลยที่จะจัดการกับปัญหาที่ฉันมีอยู่

ฉันมี div ที่มี div อื่น ๆ อยู่จำนวนหนึ่งซึ่งแต่ละอันจะถูกปล่อยให้ลอย div เหล่านี้แต่ละคนมีภาพถ่ายและคำอธิบาย สิ่งที่ฉันต้องการคือให้กลุ่มภาพถ่ายอยู่กึ่งกลางภายใน div ที่มี

อย่างที่คุณเห็นจากโค้ดด้านล่างฉันลองใช้ทั้งคู่overflow:hiddenและmargin:x autoบน div parent แล้วและฉันก็เพิ่ม a clear:both(ตามที่แนะนำในหัวข้ออื่น) หลังจากรูปถ่าย ดูเหมือนจะไม่มีอะไรสร้างความแตกต่าง

ขอบคุณ. ฉันขอขอบคุณข้อเสนอแนะใด ๆ

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

ครั้งแรกเอาfloatแอตทริบิวต์ในด้านdivs จากนั้นวางอยู่บนด้านนอกหลักtext-align: center divและสำหรับภายในdivs display: inline-blockใช้ ก็ควรที่จะให้ความกว้างที่ชัดเจนเช่นกัน

<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คุณสามารถวางลูกที่ลอยอยู่ในแนวดิ่งในแนวดิ่งได้อย่างง่ายดาย

ดังนั้นถ้าคุณมีมาร์กอัปง่ายๆเช่นนั้น:

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

ด้วย 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;
}

(นี่คือ (ที่คาดไว้ - และที่ไม่พึงประสงค์) ผล )

ตอนนี้เพิ่มกฎต่อไปนี้ลงใน wrapper:

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

และเด็กที่ลอยอยู่จะต้องอยู่ตรงกลาง ( DEMO )

เพียงเพื่อความสนุกเพื่อให้ได้แนวแนวตั้งและเพิ่ม:

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

การสาธิต

ฉันทำสิ่งเหล่านี้สำเร็จโดยใช้การวางตำแหน่งสัมพัทธ์และลอยไปทางขวา

รหัส 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/

สิ่งนี้จะใช้งานได้ใน IE8 ขึ้นไป แต่ไม่ใช่ก่อนหน้านี้ (ประหลาดใจประหลาดใจ!)

ฉันไม่จำแหล่งที่มาของวิธีการนี้ได้อย่างน่าเสียดายดังนั้นฉันจึงไม่สามารถให้เครดิตกับผู้เขียนต้นฉบับได้ หากใครรู้กรุณาโพสต์ลิงค์!

วิธีแก้ไขปัญหาต่อไปนี้ไม่ได้ใช้บล็อกแบบอินไลน์ อย่างไรก็ตามต้องมีผู้ช่วยสองคน:

1. เนื้อหาลอยอยู่
2. ตัวช่วยด้านในลอยอยู่ (ยืดได้เท่าเนื้อหา)
3. ผู้ช่วยด้านในถูกผลักไปทางขวา 50% (ด้านซ้ายอยู่ในแนวเดียวกับกึ่งกลางตัวช่วยด้านนอก)
4. เนื้อหาถูกดึงไปทางซ้าย 50% (ตรงกลางตรงกับด้านซ้ายของตัวช่วยด้านใน)
5. ผู้ช่วยด้านนอกถูกตั้งค่าให้ซ่อนการล้น

.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 ใด ๆ นี่คือสิ่งที่ฉันใช้

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

สารละลาย:

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

ในกรณีของฉันฉันไม่สามารถรับคำตอบโดย @Sampson ให้ฉันได้อย่างดีที่สุดฉันจะได้คอลัมน์เดียวที่อยู่กึ่งกลางหน้า อย่างไรก็ตามในกระบวนการนี้ฉันได้เรียนรู้ว่าการลอยตัวนั้นใช้งานได้จริงและสร้างโซลูชันนี้ได้อย่างไร ที่แกนกลางการแก้ไขนั้นง่ายมาก แต่หายากที่เห็นได้ชัดจากเธรดนี้ซึ่งมีการดูมากกว่า 146k ครั้งในขณะที่โพสต์นี้โดยไม่พูดถึง

สิ่งที่จำเป็นทั้งหมดคือการรวมจำนวนความกว้างของพื้นที่หน้าจอที่เค้าโครงที่ต้องการจะใช้จากนั้นทำให้พาเรนต์มีความกว้างเท่ากันและใช้ระยะขอบ: อัตโนมัติ แค่นั้นแหละ!

องค์ประกอบในเลย์เอาต์จะกำหนดความกว้างและความสูงของ div "outer" ใช้แต่ละ "myFloat" หรือความกว้างหรือความสูงขององค์ประกอบ + ขอบเขต + ระยะขอบและช่องว่างภายในของมันและเพิ่มเข้าด้วยกัน จากนั้นเพิ่มองค์ประกอบอื่น ๆ เข้าด้วยกันในแบบเดียวกัน สิ่งนี้จะให้ความกว้างของพาเรนต์แก่คุณ พวกมันสามารถมีขนาดแตกต่างกันบ้างและคุณสามารถทำได้ด้วยองค์ประกอบที่น้อยลงหรือมากกว่า

ตัวอย่าง (แต่ละองค์ประกอบมี 2 ด้านดังนั้นเส้นขอบระยะห่างและการเติมเต็มจะคูณด้วย x2)

ดังนั้นองค์ประกอบที่มีความกว้าง 10px, border 2px, margin 6px, padding 3px จะมีลักษณะเช่นนี้: 10 + 4 + 12 + 6 = 32

จากนั้นเพิ่มความกว้างทั้งหมดขององค์ประกอบทั้งหมดของคุณเข้าด้วยกัน

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

ในตัวอย่างนี้ความกว้างสำหรับ div "outer" จะเป็น 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>