ฉันจะจัดแนว divs ในแนวนอนได้อย่างไร

ด้วยเหตุผลบางประการ div ของฉันจะไม่อยู่กึ่งกลางแนวนอนใน div ที่มี:

.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

และบางครั้งก็มีแถว div ที่มี div เพียงบล็อกเดียว ผมทำอะไรผิดหรือเปล่า?

เพื่อให้บรรลุสิ่งที่คุณพยายามทำ:

พิจารณาใช้display: inline-blockแทนfloat.

ลองสิ่งนี้:

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with ability to provide width/height
}​

การสาธิต

• การมีmargin: 0 auto;ควบคู่ไปwidth: 100%นั้นไม่มีประโยชน์เพราะองค์ประกอบของคุณจะใช้พื้นที่เต็ม

• float: leftจะลอยองค์ประกอบไปทางซ้ายจนกว่าจะไม่มีที่ว่างเหลือจึงขึ้นบรรทัดใหม่ ใช้display: inline-blockเพื่อให้สามารถแสดงองค์ประกอบแบบอินไลน์ แต่มีความสามารถในการระบุขนาด (ตรงข้ามกับdisplay: inlineที่ความกว้าง / ความสูงจะถูกละเว้น)

การจัดตำแหน่งใน CSS เป็นฝันร้าย โชคดีที่เป็นมาตรฐานใหม่ที่มีการแนะนำโดย W3C ในปี 2009: กล่องที่มีความยืดหยุ่น มีการกวดวิชาที่ดีเกี่ยวกับมันนี่ โดยส่วนตัวแล้วฉันคิดว่ามันสมเหตุสมผลและเข้าใจง่ายกว่าวิธีอื่น ๆ

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.block {
  width: 100px;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

ใช้ FlexBox:

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

.row {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* for centering 3 blocks in the center */
  /* justify-content: space-between; for space in between */ 
}
.block {
  width: 100px;
}

แนวโน้มล่าสุดคือการใช้ Flex หรือ CSS Grid แทนการใช้ Float อย่างไรก็ตามเบราว์เซอร์ 1% บางตัวยังไม่รองรับ Flex แต่ใครจะสนใจผู้ใช้ IE เก่า ๆ อยู่แล้ว;)

Fiddle: ตรวจสอบที่นี่

อีกตัวอย่างการทำงานโดยใช้display: inline-blockและtext-align: center

HTML :

<div class='container'>
    <div class='row'>
        <div class='btn'>Hello</div>
        <div class='btn'>World</div>
    </div>
    <div class='clear'></div>
</div>

CSS :

.container {
    ...
}
.row {
    text-align: center;
}
.btn {
    display: inline-block;
    margin-right: 6px;
    background-color: #EEE;
}
.clear {
    clear: both;
}

ซอ: http://jsfiddle.net/fNvgS/

แม้ว่าจะไม่ครอบคลุมคำถามนี้ (เพราะคุณต้องการจัดตำแหน่ง<div>s ภายในคอนเทนเนอร์) แต่เกี่ยวข้องโดยตรง: ถ้าคุณต้องการจัดแนว div เพียงอันเดียวในแนวนอนคุณสามารถทำได้:

#MyDIV
{
    display: table;
    margin: 0 auto;
}

หากต้องแสดงองค์ประกอบในบรรทัดเดียวและ IE 6/7 ไม่สำคัญให้พิจารณาใช้display: tableและdisplay: table-cellแทนที่จะfloatใช้

inline-blockนำไปสู่ช่องว่างแนวนอนระหว่างองค์ประกอบและต้องการให้ช่องว่างนั้นเป็นศูนย์ วิธีที่ง่ายที่สุดคือตั้งค่าfont-size: 0สำหรับองค์ประกอบหลักแล้วเรียกคืนfont-sizeสำหรับองค์ประกอบลูกที่มีdisplay: inline-blockโดยตั้งค่าfont-sizeเป็น a pxหรือremค่า

ฉันลองใช้คำตอบที่ยอมรับ แต่ในที่สุดก็พบว่า:

margin: 0 auto;
width: anything less than 100%;

ทำงานได้ดีจนถึงขณะนี้

ฉันใช้สองวิธีนี้เมื่อต้องจัดการการจัดแนว div แนวนอน
อันดับแรก ( การจัดตำแหน่งกึ่งกลางโดยใช้คุณสมบัติขอบ ):

.center-horizontal-align {
    margin-left: auto;
    margin-right: auto;
    width: (less than 100%) or in px
}

การตั้งค่าระยะขอบซ้ายและขวาเป็นอัตโนมัติระบุว่าควรแบ่งระยะขอบที่มีอยู่เท่า ๆ กัน การจัดแนวกึ่งกลางจะไม่มีผลถ้าความกว้าง 100%

และที่สอง:

.center-horizontal-align {
    display: table
    margin-left: auto;
    margin-right: auto;
}

การใช้แนวทางที่สองจะสะดวกเมื่อคุณมีองค์ประกอบหลายอย่างและคุณต้องการให้องค์ประกอบทั้งหมดอยู่กึ่งกลางในเซลล์ตารางเดียว (เช่นปุ่มหลายปุ่มในเซลล์เดียว)