Làm cách nào để căn giữa căn chỉnh các dấu phẩy động nơi vùng chứa mẹ không có chiều rộng?

Question

Tôi biết các câu hỏi tương tự đã được hỏi trước đây nhưng tôi chưa thấy câu hỏi nào trong đó div phụ huynh có chiều rộng không xác định với câu trả lời dứt khoát.

Vì vậy, đây là tình huống.

<style> 
.parent { 
    width: 100%; 
} 

.child { 
    width: 300px; 
    float: left; 
} 

</style> 

<div class="parent> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    ... 
    <div class="child></div> 
<div> 

Về cơ bản, tôi muốn phù hợp với nhiều div con trong vùng chứa chính vì độ phân giải màn hình của người dùng có thể hỗ trợ.

Tôi không muốn sử dụng truy vấn phương tiện css3 vì tôi muốn hỗ trợ IE7.

Tôi đã thử sử dụng javascript để chỉ định chiều rộng cho phụ huynh nhưng không lý tưởng khi nội dung chuyển đến trung tâm sau khi tải. Bất kỳ ý tưởng?

Answer 1

Đây là giải pháp gần nhất mà không cần sử dụng javascript. Nó là display:inline-block; làm cho mặt bên thanh div và nằm ở trung tâm cùng một lúc. Tôi đã thử chuyển .parent thành display:table-cell; nhưng không hoạt động. Vì vậy, cần phải sử dụng <table> thực tế cho hành vi định tâm mạnh mẽ.

http://jsfiddle.net/Dgdhr/

được sửa đổi: http://jsfiddle.net/Dgdhr/1 (không có bảng: nhờ MartinodF)

<table width="100%"> 
<tr> 
<td align="center"> 
      <div class="child">1</div> 
      <div class="child">2</div> 
      <div class="child">3</div> 
      <div class="child">4</div> 
      <div class="child">5</div> 
      <div class="child">6</div> 
</td> 
</tr> 
</table> 

.child { 
    width: 100px; 
    height:100px; 
    margin:10px; 
    display:inline-block; 
    background:#e0e0e0; 
}