การจัดแนวลูกลอย: div ซ้ายไปที่กึ่งกลาง

ฉันต้องการให้กลุ่มรูปภาพแสดงในแนวนอนทั่วทั้งหน้า แต่ละภาพมีลิงก์อยู่ด้านล่างดังนั้นฉันจึงต้องใส่คอนเทนเนอร์ไว้รอบ ๆ รูปภาพ / ลิงก์กลุ่มแต่ละรายการ

สิ่งที่ใกล้เคียงที่สุดที่ฉันได้รับในสิ่งที่ฉันต้องการคือวางไว้ใน div ที่ลอย: ซ้าย ปัญหาคือฉันต้องการให้คอนเทนเนอร์จัดตำแหน่งกึ่งกลางไม่ให้ชิดซ้าย ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร

ใช้display:inline-block;แทนการลอย

คุณไม่สามารถจัดให้ลอยอยู่ตรงกลางได้ แต่บล็อกแบบอินไลน์จะอยู่กึ่งกลางราวกับว่าเป็นข้อความดังนั้นบนคอนเทนเนอร์ด้านนอกโดยรวมของ "แถว" ของคุณคุณจะต้องตั้งค่าtext-align: center;สำหรับคอนเทนเนอร์รูปภาพ / คำอธิบายภาพแต่ละรายการ (ซึ่งจะเป็นinline-block;) คุณสามารถเปลี่ยน - จัดข้อความให้ชิดซ้ายหากคุณต้องการ

CSS Flexbox ได้รับการสนับสนุนอย่างดีในทุกวันนี้ ไปที่นี่เพื่อดูบทช่วยสอนที่ดีเกี่ยวกับ flexbox

ใช้งานได้ดีในเบราว์เซอร์รุ่นใหม่ทั้งหมด:

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

บางคนอาจถามว่าทำไมไม่ใช้ display: inline-block? สำหรับสิ่งง่ายๆก็ใช้ได้ แต่ถ้าคุณมีโค้ดที่ซับซ้อนภายในบล็อกเลย์เอาต์อาจไม่อยู่ตรงกลางอย่างถูกต้องอีกต่อไป Flexbox มีความเสถียรมากกว่าลอยซ้าย

ลองแบบนี้:

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

เพียงห่อองค์ประกอบที่ลอยอยู่ใน a <div>และให้ CSS นี้:

.wrapper {

display: table;
margin: auto;

}

บางทีนี่อาจเป็นสิ่งที่คุณกำลังมองหา - 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>

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