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

Theo chiều dọc (và theo chiều ngang) Trung tâm Gắn kết 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 thiết lập "align" 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 là "style" hay "valign" tài sản. Để có nhiều specifiic các "dọc-align" không bao giờ có vẻ như để giải quyết bất kỳ vấn đề của mình, đặc biệt là nếu là viết một đoạn qua trình duyệt CSS.

Nếu không có việc sử dụng các bảng HTML, VẤN ĐỀ của 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ó thể được tất cả các giao diện người dùng / nhà phát triển CSS 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 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 (chiều cao không rõ).

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 một loạt 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, IE7 , 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 có 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ì để có "table-cell" 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 để 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ả như sau: -

HTML_CSS_vertical_align_vertical_middle_aligned_images

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


Tìm hiểu về các giải pháp:
Đối với các trình duyệt hiểu được hiển thị: bảngmàn hình hiển thị: thuộc tính bảng tế bào, 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 Hack cụ thể (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 bằng 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 qua trình duyệt trên.


CSS có thể dễ dàng sửa đổi như sau để đạt được, dọc-align: top hoặc 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/> views: 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/> views: 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ư các 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 giờ đây, 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 ô trong bảng, KHÔNG phải đánh bại nhiều quanh co
  • Ít nhất, thiết lập lề -TOP: tự động và margin-bottom: tự động, sẽ cung cấp cho như là kết quả tương tự như với margin-left và margin-right thiết lập để tự động
  • Những cuộc chiến tranh trình duyệt sẽ kết thúc một ngày.
  • Sẽ 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ề 587 lần) ..for 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