* Liên kết hình ảnh dọc * hoàn hảo

Question

Tôi có một hình vuông có kích thước cố định và muốn đặt một hình ảnh có kích thước tùy ý bên trong sao cho nó được căn giữa theo chiều ngang và chiều dọc, sử dụng CSS. Theo chiều ngang là dễ dàng:

.container { text-align: center } 

Đối với phương thẳng đứng, giải pháp phổ biến là:

.container { 
    height: 50px; 
    line-height: 50px; 
} 
img { 
    vertical-align: middle; 
} 

Nhưng điều này là không hoàn hảo , tùy thuộc vào kích thước font chữ, hình ảnh sẽ đạt khoảng 2-4px quá xuống thấp. Để hiểu biết của tôi, điều này là bởi vì "trung" được sử dụng cho căn chỉnh dọc không thực sự là giữa, nhưng một vị trí cụ thể trên phông chữ gần với giữa. Giải pháp (hơi hacky) sẽ là:

container { 
    font-size: 0; 
} 

và tính năng này hoạt động trong Chrome và IE7, chứ không phải IE8. Chúng tôi hy vọng sẽ làm cho tất cả các dòng phông chữ cùng một điểm, ở giữa, nhưng nó có vẻ là hit-and-miss tùy thuộc vào trình duyệt và, có lẽ, phông chữ được sử dụng.

Giải pháp duy nhất tôi có thể nghĩ là để hack chiều cao dòng, làm cho nó ngắn hơn một chút, để làm cho hình ảnh xuất hiện ở đúng vị trí, nhưng nó có vẻ cực kỳ mong manh. Có giải pháp nào tốt hơn không?

Xem một bản demo của cả ba giải pháp ở đây: http://jsfiddle.net/usvrj/3/

Những người không có IE8 có thể tìm thấy ảnh chụp màn hình này hữu ích:

Answer 1

Cách sử dụng hình ảnh làm nền? Bằng cách này bạn có thể tập trung nó ở mọi nơi. Một cái gì đó dọc theo những dòng:

margin:5px; 
padding:0; 
background:url(http://dummyimage.com/50) no-repeat center center red; 
height:60px; 
width:60px; 

Answer 2

Bạn đã thử như sau:

img { 
    display: block; 
    line-height: 0; 
} 

Tôi thường sử dụng hack này, nhưng tôi đã không thực sự kiểm tra nó triệt để trong IE8.

Answer 3

Đây thực sự là hacky, nhưng đó là những gì chúng tôi đã sử dụng để thực hiện trong ví dụ6 ngày.

.container { 
    position: relative; 
} 
img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -12px; // half of whatever the image's height is, assuming 24px 
    margin-left: -12px; // half of whatever the image's width is, assuming 24px 
} 

Tôi có thể thiếu điều gì đó trong ví dụ này, nhưng bạn có ý tưởng.

Answer 4

Đây là một JS Fiddle nhỏ tôi đã thực hiện: http://jsfiddle.net/rachit5/Ge4YH/

Tôi tin rằng nó phù hợp với yêu cầu của bạn.

HTML:

<div> 
    <img src=""/> 
</div> 

CSS:

div{height:400px;width:400px;position:relative;border:1px solid #000;} 
img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;} 

Answer 5

Nếu css3 là một lựa chọn, sau đó flexbox làm một công việc tốt ở dọc và ngang xếp thẳng:

UPDATED FIDDLE

.container { 
    display:flex; 
    align-items: center; /* align vertical */ 
    justify-content: center; /* align horizontal */ 
}