Thủ thuật canh giữa mọi đối tượng với css

Xem: 1684    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 5 đánh giá ) File đã được kiểm thử


Một trong những việc khiến bạn cảm thấy khó khăn nhất đó là canh giữa trong css. Thông thường chúng ta thường sử dụng margin:0 auto; để canh giữa chiều ngang cho đối tượng sử dụng, tuy nhiên nếu để canh giữa theo chiều dọc cho đối tượng đó nữa thì lại không được.

Có rất nhiều cách cũng như thủ thuật có sẵn trên mạng hướng dẫn các bạn canh giữa đối tượng cả về chiều ngang lẫn chiều dọc, nhưng 2 thủ thuật mà mình chia sẻ bên dưới sẽ không làm bạn thất vọng vì nó có thể canh giữa tuyệt đối mà không ngại gặp vấn đề với bất kì trình duyệt phổ biến nào hiện nay.

Giả sử chúng ta chúng ta cần canh giữa một hình ảnh bên trong một thẻ <div> chúng ta sẽ thử bằng 2 cách như sau :

Cách 1 :

HTML

<div class="wraptocenter"><span></span><img src="images/1.jpg" ></div>

Và để canh giữa hình ảnh, các bạn dùng đoạn CSS như sau :

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

Cách 2 :

HTML

<div class="box">
    <img src="images/1.jpg" >
</div>

Và đoạn css sẽ như sau :

.box{
    background:#333;
    width:400px;
    height:400px;
    padding:10px;
    color:#fff;
    margin:0 auto;
    position:relative;
}
 
.box img{
    margin:auto;
    position:absolute;
    top:0; left:0; right:0; bottom:0;
}

Trong cách này các bạn chỉ cần chú ý đến phần định dạng .box img{ …} vì đây chính là chìa khóa cho việc canh giữa đối tượng.

Đây chính là 2 cách mà mình thấy canh giữa tốt nhất, nếu bạn nào có cách hay hơn thì đừng ngần ngại chia sẻ cho mình và mọi người nhá.

Chúc các bạn thành công !

Thủ thuật canh giữa mọi đối tượng với css

Thủ thuật canh giữa mọi đối tượng với css Đăng ngày 16-08-2014  Một trong những việc khiến bạn cảm thấy khó khăn nhất đó là canh giữa trong css. Thông thường chúng ta thường sử dụng margin:0 auto; để canh giữa chiều ngang cho đối tượng sử dụng, tuy nhiên nếu để canh giữa theo chiều dọc cho đối tượng đó nữa thì lại không được. 5/10 1684

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+84) 246. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn