CSS แสดงศูนย์กลางบล็อกแบบอินไลน์หรือไม่

ฉันมีรหัสการทำงานที่นี่: http://jsfiddle.net/WVm5d/ (คุณอาจต้องทำให้หน้าต่างผลลัพธ์ใหญ่ขึ้นเพื่อดูเอฟเฟกต์การจัดแนวกลาง)

คำถาม

รหัสผลงานดี display: table;แต่ฉันไม่ชอบที่จะมี มันเป็นวิธีเดียวที่ฉันจะทำให้การจัดตำแหน่งกึ่งห่อ ฉันคิดว่ามันจะดีกว่าถ้ามีวิธีที่จะใช้หรือdisplay: block; display: inline-block;เป็นไปได้ไหมที่จะแก้ปัญหาการจัดตำแหน่งศูนย์อีกทางหนึ่ง?

การเพิ่มการแก้ไขด้วยลงในคอนเทนเนอร์ไม่ใช่ตัวเลือกสำหรับฉัน

ฉันจะวางรหัสของฉันที่นี่หากลิงก์ JS Fiddle เสียในอนาคต:

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

โซลูชันที่ได้รับการยอมรับจะใช้งานไม่ได้สำหรับฉันเพราะฉันต้องการองค์ประกอบลูกที่มีdisplay: inline-blockทั้งแนวนอนและแนวตั้งอยู่ภายในศูนย์ความกว้าง 100%

ฉันใช้คุณสมบัติของ Flexbox justify-contentและalign-itemsคุณสมบัติตามลำดับซึ่งช่วยให้คุณสามารถจัดองค์ประกอบองค์ประกอบในแนวนอนและแนวตั้ง โดยการตั้งค่าทั้งสองไปcenterที่ผู้ปกครององค์ประกอบลูก (หรือองค์ประกอบหลาย!) จะอยู่ตรงกลางอย่างสมบูรณ์

โซลูชันนี้ไม่ต้องการความกว้างคงที่ซึ่งไม่เหมาะสมสำหรับฉันเนื่องจากข้อความของปุ่มจะเปลี่ยนไป

นี่คือตัวอย่าง CodePenและตัวอย่างโค้ดที่เกี่ยวข้องด้านล่าง:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

ลองสิ่งนี้ ฉันเพิ่มลงtext-align: centerในร่างกายและdisplay:inline-blockห่อแล้วลบของคุณdisplay: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

หากคุณมี a <div>ด้วยtext-align:center;ข้อความใด ๆ ที่อยู่ภายในจะถูกจัดกึ่งกลางตามความกว้างขององค์ประกอบคอนเทนเนอร์นั้น inline-blockองค์ประกอบจะถือว่าเป็นข้อความสำหรับวัตถุประสงค์นี้ดังนั้นพวกเขาจะถูกจัดกึ่งกลาง

นอกจากนี้คุณยังสามารถทำสิ่งนี้ด้วยการวางตำแหน่งตั้งค่า div parent เป็น div ญาติและ child div เป็นสัมบูรณ์

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

คุณไม่จำเป็นต้องใช้ "display: table" เหตุผลที่มาร์จิ้นของคุณ: 0 ความพยายามจัดกึ่งกลางอัตโนมัติไม่ทำงานเพราะคุณไม่ได้ระบุความกว้าง

สิ่งนี้จะใช้ได้ดี:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

คุณไม่จำเป็นต้องระบุ display: block เนื่องจาก div นั้นจะถูกบล็อกตามค่าเริ่มต้น คุณอาจสูญเสียโอเวอร์โฟลว์: ซ่อน

เช่นเดียวกับคำตอบของ @ vijayscode สิ่งนี้จะจัดวางองค์ประกอบอินไลน์บล็อกในแนวนอน (แต่ไม่จำเป็นต้องปรับเปลี่ยนสไตล์ของผู้ปกครองด้วย):

  display: inline-block;
  position: relative;
  left: 50%; // Move the element to the left by 50% of the container's width
  transform: translateX(-50%); // Calculates 50% of the element's width and moves it by that amount across the X-axis to the left

ฉันเพิ่งเปลี่ยน 2 พารามิเตอร์:

.wrap {
    display: block;
    width:661px;
}

การสาธิตสด

บทความที่ดีฉันพบสิ่งที่ดีที่สุดสำหรับฉันคือการเพิ่มขนาด%

.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}

เพียงใช้:

line-height:50px

แทนที่ "50px" ด้วยความสูงเท่ากับ div ของคุณ