Bài viết Tagged 'sắp'

Theo chiều dọc (theo chiều ngang và) Trung tâm Canh lề nội dung trong một DIV sử dụng CSS

Chủ Nhật 12 Tháng Mười, năm 2008 bởi Nikhil

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 trong một ô trong bảng dường như chỉ chơi của trẻ. Đơn giản chỉ cần đặt "căn chỉnh" hoặc "valign" tài sản của bảng để có sự liên kết của sự lựa chọn của bạn, miếng bánh!
Với CSS, mặc dù chúng tôi có "dọc-align" tài sản cho các yếu tố, nó dường như không thể đơn giản như là "căn chỉnh" hoặc "valign" tài sản. Được nhiều specifiic "thẳng đứng-align" không bao giờ dường như để giải quyết bất kỳ vấn đề của bạn, đặc biệt nếu được viết một phần qua trình duyệt CSS.

Nếu không có việc sử dụng các bảng HTML, vấn đề tập trung vào đối tượng, có thể là một hình ảnh hoặc một số văn bản trong một bộ phận chứa, có lẽ là cơn ác mộng mỗi nhà phát triển giao diện người dùng / CSS 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 xếp thẳng, nếu đối tượng được làm trung tâm là năng động trong tự nhiên, tức là khi chiều cao của nó có thể thay đổi (không rõ chiều cao).

Mặc dù không có giải pháp thẳng về phía trước biết rằng sẽ làm việc trên phạm vi của các trình duyệt, chúng tôi phải đối phó với, các giải pháp mà tôi đã cố gắng để đi đến có vẻ làm việc trong vài trình duyệt mà tôi đã thử nó trong (IE6, trình duyệt IE 7 , FF).

GIẢI PHÁP:
Trong các trình duyệt như Mozilla, Opera và Safari, Các hành xử kỳ lạ "dọc-align" tài sản có thể được đưa đến giác quan của mình, chỉ đơn giản bằng cách thiết lập "hiển thị" tài sản của bộ phận chứa để "table-cell" (display: table-cell) .

Vấn đề vẫn còn với IE gia đình của các trình duyệt, người, nhưng dường như không hiểu những gì để có "bàn di động" tài sản và thiếu hiểu biết như họ đang có, 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 vài yếu tố DOM hơn 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/> Lượt Xem: 3456 </ div>
</ Div>
</ Div>

Kết quả như sau: -

HTML_CSS_vertical_align_vertical_middle_aligned_images

xem demo ở đây | Tải về tập tin nguồn (download về 571 lần)


Sự hiểu biết các giải pháp:
Cho các trình duyệt mà hiểu hiển thị: bảngmàn hình hiển thị: thuộc tính bảng-cell, 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 hack cụ thể IE (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) bên trong là 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 về khuôn mặt của bạn, nhưng nó hoạt động. 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 qua trình duyệt trên.


CSS có thể dễ dàng sửa đổi như sau để đạt được, theo chiều dọc-align: top hoặc theo chiều dọc-align: dưới

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/> Lượt Xem: 1234 </ div>
</ Div>
</ Div>

Kết quả như sau: -

HTML_CSS_vertical_align_vertical_top_aligned_images

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/> Lượt Xem: 1234 </ div>
</ Div>
</ Div>

Kết quả như sau: -

HTML_CSS_vertical_align_vertical_bottom_aligned_images

xem demo ở đây | Tải về tại đây


Định tâm ngang của đối tượng chỉ đơn giản là đạt được với các tài sản ký quỹ, bằng cách thiết lập margin-left và margin-right 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 đề liên kết này. Nhưng bây giờ với giải pháp này, tôi cảm thấy chút bình an.

Với hy vọng một ngày nào đó

  • bất động sản dọc liên kết trong CSS sẽ làm việc như nó bên trong một ô của bảng, mà không cần phải đánh bại nhiều quanh co
  • Ít nhất, thiết lập margin-top: tự động và margin-bottom: tự động, sẽ cho là kết quả tương tự như với margin-left và margin-right thiết lập để tự động
  • Các cuộc chiến tranh trình duyệt sẽ kết thúc một ngày.
  • Có sẽ chỉ là MỘT trình duyệt cho tất cả.

Tải về CSS và HTML của giải pháp trên đây (đã tải 571 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 ... :)


get ExpressingIT News by Email Theo dõi ExpressingIT qua Email hoặc Theo tôi trên Twitter


Theo dõi ExpressingIT RSS
get ExpressingIT News by Email Theo dõi ExpressingIT qua Email
Theo tôi trên Twitter