Làm cách nào để căn chỉnh theo chiều ngang các div của tôi?

Vì một số lý do mà các div của tôi sẽ không căn giữa 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 div khối trong đó. Tôi đang làm gì sai?

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

Cân nhắc sử dụng display: inline-blockthay vì float.

Thử cái này:

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

BẢN GIỚI THIỆU

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

• float: leftsẽ thả nổi các phần tử sang 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ị nội tuyến các phần tử, nhưng với khả năng cung cấp kích thước (trái ngược với display: inlinevị trí chiều rộng / chiều cao bị bỏ qua)

Căn chỉnh trong CSS từng là một cơn ác mộng. May mắn thay, một tiêu chuẩn mới được W3C giới thiệu vào năm 2009: Hộp linh hoạt . Có một hướng dẫn tốt về nó ở đây . Cá nhân tôi thấy nó logic 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;
  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>

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 Grid thay vì sử dụng Float. Tuy nhiên, vẫn còn một số trình duyệt 1% không hỗ trợ Flex. Nhưng dù sao thì ai thực sự quan tâm đến những người dùng IE cũ;)

Fiddle: Kiểm tra tại đây

Một ví dụ làm việc khác , sử dụng display: inline-blockvà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/

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

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

Nếu các phần tử được hiển thị trên một dòng và IE 6/7 không quan trọng, hãy xem xét sử dụng display: tablevà display: table-cellthay thế float.

inline-blockdẫn đến khoảng cách ngang giữa các phần tử và yêu cầu xóa khoảng trống đó. Cách đơn giản nhất là đặt font-size: 0cho phần tử mẹ và sau đó khôi phục font-sizecho các phần tử con có display: inline-blockbằng cách đặt chúng font-sizethành a pxhoặc remgiá trị.

Tôi đã thử 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.

Tôi sử dụng hai cách tiếp cận này khi tôi cần xử lý căn chỉnh div theo chiều ngang.
đầu tiên ( Căn giữa Sử dụng Thuộc tính ký quỹ ):

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

Đặt lề trái và lề phải thành tự động chỉ định rằng chúng phải chia đều lề khả dụng. Căn giữa không có hiệu lực nếu chiều rộng là 100%.

va thu hai:

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

Sử dụng cách tiếp cận thứ hai rất tiện lợi khi bạn có một số phần tử và bạn muốn tất cả chúng được căn giữa trong một ô bảng (tức là một số nút trong một ô).