Nhiều div nổi trung tâm trong bố cục lỏng

Tôi có ý tưởng về bố cục tôi muốn sử dụng, nhưng tôi không thể làm cho bố cục hoạt động chính xác. Tôi hy vọng một ai đó ở đây có thể giúp đỡ vì tôi đã dành hàng giờ tìm kiếm.Nhiều div nổi trung tâm trong bố cục lỏng

Bố cục giống như vậy.

Một nhà bao bọc div 6 div con. Những div con này phải được đặt ở giữa TẤT CẢ lần bất kể kích thước của div bao bọc.

<html> 
<head> 
<title>Testing</title> 
<style> 
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; } 
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; } 
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; } 
</style> 
</head> 
<body> 

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <br class="clear" /> 
</div> 

</body> 
</html>

Vấn đề là khi trình duyệt được định lại kích cỡ nhỏ hơn và hộp được gõ vào dòng bên dưới hộp sẽ ở bên trái, trong khi tôi muốn chúng luôn được căn giữa. Điều này có thể sử dụng css tinh khiết hay tôi cần sử dụng một số jquery?

Nguồn

2010-10-12 Craig Ward

Họ không bao giờ được làm trung tâm cho tôi sử dụng mã của bạn? –

Có lẽ giải pháp dễ nhất là nếu bạn loại bỏ phao: kiểu trái từ các hộp và thay đổi thuộc tính hiển thị thành chặn nội dòng. Sau đó, tất cả những gì bạn cần làm là căn chỉnh văn bản: chính giữa trên trình bao bọc.

<html> 
<head> 
<title>Testing</title> 
<style> 
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; } 
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center } 
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; background: #fff; display:inline-block } 
</style> 
</head> 
<body> 

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <br class="clear" /> 
</div> 

</body>

Bạn có thể kiểm tra mã ở đây: http://jsbin.com/uqamu4/edit

Nguồn

2010-10-12 10:03:58

Có lẽ là giải pháp tốt nhất, nhưng sẽ không hoạt động trong IE6 và 7 –

Hi Viktor, Vấn đề với đó là các hộp không bọc. Tôi muốn màn hình này hoạt động ở bất kỳ thiết bị nào. Ví dụ, máy tính xách tay bình thường có thể sẽ hiển thị 3 hộp cạnh nhau, nhưng một chiếc iPhone sẽ chỉ hiển thị một trên đầu trang của người khác. Nhưng nếu ai đó thay đổi khung nhìn để nó gõ một ô vào dòng tiếp theo, nó vẫn nên căn giữa tất cả các ô –

Thực ra, bỏ qua tôi. Có vẻ như nó hoạt động nhưng chỉ hiển thị 2 cạnh nhau tại thời điểm mà tôi có thể thay đổi. Chúc mừng :) –

Công việc này sẽ không bằng ie 8 hoặc ít hơn, không biết khoảng 9, nhưng kể từ khi bạn sử dụng max-width và min-width mà không làm việc ở đó một trong hai Tôi sẽ đăng nó anyway.

<html> 
<head> 
<title>Testing</title> 
<style> 
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; } 
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center; } 
.box { width: 280px; padding: 10px; margin:8px; height: 260px; border: 0px; background: #fff; display:inline-block;} 

</style> 
</head> 
<body> 

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <br class="clear" /> 
</div> 

</body> 
</html>

Nguồn

2010-10-12 10:05:02

Sẽ hoạt động trong IE8, nhưng không phải là 7 –

không hoạt động trong IE8 của tôi ... –

Bạn có thể sử dụng text-align: center trong wrapper và display: inline-block cho các hộp để làm cho họ cư xử như các yếu tố văn bản bình thường mà được tập trung không có vấn đề gì.

Nên biết trước: Không làm việc trong IE6 và IE 7. Tác phẩm trong Chrome và FF

JSFiddle here.

Nguồn

2010-10-12 10:05:45

Các giải pháp mà làm việc cho tôi:

<style> 
    body { 
     /* To center the list */ 
     text-align: center; 
    } 

    #wrapper { 
     /* To reset 'text-align' to the default */ 
     text-align: left; 

     display: inline; 
    } 

    .box { 
     display: inline-block; 
    } 
</style>

Nguồn

2014-07-13 18:50:49 Blackbird

Nhiều div nổi trung tâm trong bố cục lỏng

Trả lời

Các vấn đề liên quan