Bạn có thể tạo lưới phản ứng vuông với nội dung trung tâm dọc và ngang chỉ với CSS . Tôi sẽ giải thích làm thế nào trong một quá trình từng bước nhưng trước tiên đây là 2 bản demo về những gì bạn có thể đạt được:
Bây giờ hãy xem làm thế nào để làm cho các hình vuông đáp ứng ưa thích!
1. Tạo các hình vuông đáp ứng:
Mẹo để giữ cho các phần tử vuông (hoặc bất kỳ tỷ lệ khung hình nào khác) là sử dụng phần trăm padding-bottom.
Lưu ý bên lề: bạn có thể sử dụng phần đệm trên cùng hoặc lề trên / dưới nhưng nền của phần tử sẽ không hiển thị.
Vì phần đệm trên cùng được tính theo chiều rộng của phần tử cha ( Xem MDN để tham khảo ), chiều cao của phần tử sẽ thay đổi theo chiều rộng của phần tử. Bây giờ bạn có thể Giữ tỷ lệ khung hình của nó theo chiều rộng của nó.
Tại thời điểm này, bạn có thể mã:
HTML :
<div></div>
CSS
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
Dưới đây là một ví dụ bố trí đơn giản của lưới ô vuông 3 * 3 bằng cách sử dụng mã ở trên.
Với kỹ thuật này, bạn có thể thực hiện bất kỳ tỷ lệ khung hình nào khác, dưới đây là bảng đưa ra các giá trị của phần đệm dưới theo tỷ lệ khung hình và chiều rộng 30%.
Aspect ratio | padding-bottom | for 30% width
------------------------------------------------
1:1 | = width | 30%
1:2 | width x 2 | 60%
2:1 | width x 0.5 | 15%
4:3 | width x 0.75 | 22.5%
16:9 | width x 0.5625 | 16.875%
2. Thêm nội dung bên trong hình vuông
Vì bạn không thể thêm nội dung trực tiếp vào các hình vuông (nó sẽ mở rộng chiều cao của chúng và hình vuông sẽ không còn là hình vuông nữa), bạn cần tạo các phần tử con (ví dụ này tôi đang sử dụng div) bên trong chúng position: absolute;và đặt nội dung bên trong chúng . Điều này sẽ đưa nội dung ra khỏi dòng chảy và giữ kích thước của hình vuông.
Đừng quên thêmposition:relative; vào div cha mẹ để con cái tuyệt đối được định vị / kích thước tương đối với cha mẹ của chúng.
Hãy thêm một số nội dung vào lưới ô vuông 3x3 của chúng tôi:
HTML :
<div class="square">
<div class="content">
.. CONTENT HERE ..
</div>
</div>
... and so on 9 times for 9 squares ...
CSS :
.square {
float:left;
position: relative;
width: 30%;
padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
KẾT QUẢ <- với một số định dạng để làm cho nó đẹp!
3. Trung tâm nội dung
Theo chiều ngang:
Điều này là khá dễ dàng, bạn chỉ cần thêm text-align:centervào .content.
KẾT QUẢ
Căn dọc
Điều này trở nên nghiêm trọng! Bí quyết là sử dụng
display:table;
/* and */
display:table-cell;
vertical-align:middle;
nhưng chúng ta không thể sử dụng display:table;trên .squarehoặc .contentdivs vì nó mâu thuẫn với position:absolute;vì vậy chúng tôi cần phải tạo ra hai đứa con bên trong .contentdiv. Mã của chúng tôi sẽ được cập nhật như sau:
HTML :
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell">
... CONTENT HERE ...
</div>
</div>
</div>
</div>
... and so on 9 times for 9 squares ...
CSS:
.square {
float:left;
position: relative;
width: 30%;
padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
}
Bây giờ chúng ta đã hoàn thành và chúng ta có thể xem kết quả ở đây:
Fiddle có thể chỉnh sửa ở đây
