Làm cách nào để sắp xếp các div của tôi theo chiều ngang?

Question

Đối với một số lý do divs tôi sẽ không tập trung theo chiều ngang trong một div chứa:

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

Và đôi khi có một div hàng chỉ với một khối div trong đó. Tôi đang làm gì sai?

Answer 1

Để đạt được những gì bạn đang cố gắng để làm:

Xem xét sử dụng display: inline-block thay vì float.

Answer 2

Hãy thử điều này:

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

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

DEMO

• có margin: 0 auto; cùng với width: 100% là vô ích bởi vì bạn yếu tố sẽ mất toàn bộ không gian.

• float: left sẽ làm nổi các phần tử bên trái, cho đến khi không còn khoảng trắng, do đó chúng sẽ đi trên một dòng mới. Sử dụng display: inline-block để có thể hiển thị các yếu tố nội tuyến, nhưng với khả năng cung cấp kích thước (so với display: inline nơi chiều rộng/chiều cao được bỏ qua)

Answer 3

Nếu yếu tố này sẽ được hiển thị trong một dòng (và IE6/7 làm không quan trọng), hãy xem xét sử dụng display: table/table-cell thay vì float.

Sử dụng inline-block dẫn đến khoảng cách ngang giữa các yếu tố và do đó đòi hỏi để có một bước để zero rằng những khoảng trống (cách đơn giản nhất là để thiết lập font-size: 0 cho yếu tố phụ huynh và sau đó khôi phục font-size cho yếu tố con có display: inline-block).

Answer 4

working example khác, sử dụng display: inline-block và 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; 
} 

Fiddle: http://jsfiddle.net/fNvgS/

Answer 5

Mặc dù không bao gồm câu hỏi này (vì bạn muốn align <div> s bên trong container) nhưng liên quan trực tiếp: nếu bạn muốn sắp xếp chỉ là một div ngang bạn có thể làm điều này:

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

Answer 6

Tôi đã thử các câu trả lời được chấp nhận , nhưng cuối cùng nhận thấy rằng:

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

Hoạt động tốt cho đến nay.

Answer 7

Tôi đã sử dụng hai phương pháp này khi tôi cần xử lý căn chỉnh ngang.
đầu tiên (Center Aligning Using the margin Property):

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

Thiết lập lề trái và phải để tự động xác định rằng họ nên chia lề có sẵn như nhau. Căn giữa không có hiệu lực nếu chiều rộng là 100%.

và thứ hai:

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

Sử dụng phương pháp thứ hai là thuận tiện khi bạn có một số yếu tố và bạn muốn tất cả trong số họ được tập trung ở một ô trong bảng (nghĩa là một vài nút trong một tế bào.).

Answer 8

Căn chỉnh trong CSS là một cơn ác mộng. May mắn thay, một tiêu chuẩn mới được giới thiệu bởi W3C vào năm 2009: Flexible Box. Có một hướng dẫn tốt về nó here. Cá nhân tôi thấy nó hợp lý và dễ hiểu hơn nhiều so với các phương pháp khác.

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

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

Answer 9

Sử dụng 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; 
} 

Xu hướng mới nhất là sử dụng Flex hoặc CSS lưới thay vì sử dụng phao. Tuy nhiên, vẫn còn một số trình duyệt 1% không hỗ trợ Flex. Nhưng những người thực sự quan tâm đến người dùng IE cũ anyway;)

Fiddle: Check Here