2011-02-03 45 views
5

thể trùng lặp:
How to make an image center (vertically & horizontally) inside a bigger divhình ảnh ở vị trí tuyệt đối div

Tôi có một div đó là với vị trí tuyệt đối (chiều rộng/chiều cao là 100%). Thông báo, không phải px, phần trăm.
Bên trong div này tôi có một hình ảnh. Làm cách nào để căn giữa hình ảnh này trong div này?

+0

Bạn muốn căn giữa hình ảnh theo chiều dọc VÀ chiều ngang, vâng? –

Trả lời

8

CSS:

/* where margin-left = {img width}/2, and margin-top= {img height}/2 */ 
.bigdiv { 
    width:100%; 
    height:100%; 
    position:absolute; 
} 
.bigdiv img { 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin-left:-10px; 
    margin-top:-10px; 
} 

HTML:

<div class="bigdiv"><img src="eg.png" /></div> 

Bạn cũng có thể đặt lệnh margin-left, margin-top của bạn như là một phong cách trên thẻ img thay (kể từ khi họ đang mỗi độc đáo hình ảnh).

+0

Ví dụ của bạn hoạt động nhưng thêm cuộn ngang và dọc trên Safari 5.0.3 (Mac OS X 10.6.6) Hình ảnh của tôi là 100px/100px để giá trị lề (trái | phải) là -50px Cách khắc phục điều đó? –

+0

Giống như mặc định 'body' padding safari đặt trong, hãy thử thêm CSS:' body {margin: 0; padding: 0;} ' – Rudu

+0

Bây giờ hoạt động. Cảm ơn. –

Các vấn đề liên quan