HTML5 & CSS3

Căn giữa theo chiều cao và chiều rộng cho một bức ảnh

Chia sẻ nhanh

Dưới đây là một số cách căn giữa cho một bức ảnh theo cả chiều cao và chiều rộng của div cha như sau

CSS background-image Technique

html { 
   width:100%; 
   height:100%; 
   background:url(logo.png) center center no-repeat;
}

 

CSS + Inline Image Technique:

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

 

Table technique:

html, body, #wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}

HTML

<table id="wrapper">
  <tr>
    <td><img src="/logo.png" alt="" /></td>
  </tr>
</table>

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?