Trước khi chúng tôi đã phải đối phó với CSS để tạo ra bố cục trang của chúng tôi, việc sắp xếp một số nội dung bên trong một ô trong bảng dường như chỉ trẻ em chơi. Đơn giản chỉ cần thiết lập "align" tài sản "valign" của bảng để có sự liên kết của sự lựa chọn của bạn, mảnh bánh!
Với bố trí CSS, mặc dù chúng tôi có "theo chiều dọc-align" tài sản cho các yếu tố, nó không có vẻ như đơn giản như "sắp xếp" hoặc tài sản "valign". Để được specifiic nhiều hơn "theo chiều dọc-align" không bao giờ có vẻ như để giải quyết bất kỳ vấn đề của bạn, đặc biệt là nếu được viết một phần của qua trình duyệt CSS.
Nếu không có việc sử dụng các bảng HTML, VẤN ĐỀ trung vào đối tượng, là một hình ảnh hoặc một số văn bản trong một bộ phận chứa, có thể được tất cả các UI / CSS phát triển cơn ác mộng tại một số điểm. Vấn đề này tiếp tục ngoại suy lo lắng của bạn sắp xếp, nếu các đối tượng được làm trung tâm năng động trong tự nhiên, tức là khi chiều cao của nó là biến (không rõ chiều cao).
Mặc dù có là không có giải pháp được gọi thẳng về phía trước sẽ làm việc trên phạm vi của các trình duyệt chúng ta phải đối phó với các giải pháp mà tôi đã cố gắng để đi đến không có vẻ làm việc trong các trình duyệt mà tôi đã thử nó trong (IE6, IE 7 , FF).
GIẢI PHÁP:
Trong các trình duyệt như Mozilla, Opera và Safari, lạ hành xử "theo chiều dọc-align" tài sản có thể được đưa đến giác quan của nó, chỉ đơn giản bằng cách thiết lập "hiển thị" tài sản của các bộ phận có chứa tế bào bảng "(display: table-cell) .
Vấn đề vẫn còn với gia đình của các trình duyệt IE, người, nhưng dường như không hiểu những gì với tài sản "bàn di động" và không biết gì như họ, họ chỉ cần bỏ qua nó. Các giải pháp đưa ra dưới đây, mặc dù đơn giản, quảng cáo một DOM vài yếu tố HTML của bạn để làm cho mọi việc xảy ra.
CSS và HTML trông như thế này
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> views: 3456 </ div>
</ Div>
</ Div>
Kết quả trông như thế này:
xem demo ở đây | Tải tập tin Source (tải về 452 lần)
Hiểu biết về các giải pháp: Đối với các trình duyệt hiểu hiển thị bảng và màn hình hiển thị: table-cell tài sản, nó hiếm khi cần bất kỳ lời giải thích. Đối với IE, với việc sử dụng một trình duyệt IE cụ thể hack (băm hack), chúng tôi hoàn toàn vị trí các thùng chứa đối tượng (obj_container) trong một nửa chiều cao có sẵn. Sau đó, đối tượng (obj) trong vị trí tương đối và được chuyển lên một nửa chiều cao của nó ... Vâng! Tôi dường như hiểu được cái nhìn trên khuôn mặt của bạn, nhưng Nó hoạt động. Hãy thử nó! Các kỹ thuật nói trên được kết hợp để cung cấp cho chúng ta giải pháp trình duyệt trên thập tự giá.
CSS có thể được dễ dàng sửa đổi như dưới đây để đạt được, theo chiều dọc-align: trên hoặc dọc-align: dưới cùng TOP Align CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}
HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> views: 1234 </ div>
</ Div>
</ Div>
Kết quả trông như thế này:
BOTTOM Align CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> views: 1234 </ div>
</ Div>
</ Div>
Kết quả trông như thế này:
xem demo ở đây | Tải về tại đây
Ngang trung của đối tượng chỉ đơn giản là đạt được với các tài sản lợi nhuận, bằng cách thiết lập lề trái và lề phải tự động Có vẻ như lứa tuổi, kể từ khi tôi đã cố gắng tìm một giải pháp hợp lý cho vấn đề này liên kết. Nhưng bây giờ với giải pháp này, tôi cảm thấy hòa bình ít.
Với hy vọng rằng một ngày nào đó
- tài sản liên kết dọc trong CSS sẽ làm việc như nó bên trong một ô trong bảng, KHÔNG phải đánh bại nhiều quanh co
- Ít nhất, thiết lập margin-top: tự động và lề dưới: tự động, sẽ cho kết quả tương tự như với margin-left và thiết lập lề bên phải để tự động
- Cuộc chiến trình duyệt sẽ có một ngày nào đó.
- Có chỉ ONE trình duyệt cho tất cả.
Tải về CSS và HTML của các giải pháp trên đây (tải về 452 lần) ... cho dễ hiểu, CSS không được tối ưu hóa
PS: Và bằng cách này, đó là hình thu nhỏ của một số hình ảnh tôi đã nhấp vào ... 
