Büyük Resimleri dikey olarak daha küçük bir div içinde ortalayın

Question

Bana biraz çıldırtan bir sorunum var. Daha büyük bir görüntü (sabit boyutta olmayan) içeren küçük bir div (

) Bu büyük resmi aldığımı ve kutu sınırları içine sığacak şekilde% 100 genişliğe sahip olmasını sağladım ancak resimdeki görüntüye ihtiyacım var. Sadece aşağıdan yukarı doğru değil, dikey olarak merkezde ortalanarak ortaya çıkar.

Bunun için kolay bir CSS düzeltmesi var mı? Şaka yapıyorum ama fazla şansım yok.

Currently: Intended: 
--------  -------- 
| div /w | |overflow| 
| image |  --------  
--------  | div w/ | 
|overflow| | image | 
| image |  -------- 
--------  |overflow| 
       -------- 

Answer 1

sorun hakkında daha fazla bilmeden, yaklaşım olabilir birçok yolu vardır.

Büyük olasılıkla, görüntüyü div'in arka planı olarak ayarlarsanız (HTML'ye yerleştirmek yerine), sorununuzu çözer;

div {background: url(image.png) center center no-repeat;} 

Sevdiğim başka yöntem bunu istiyorum tam olarak nerede görüntüyü konumlandırmak için position:absolute kullanmaktır.

Ayrıca, vertical-align: middle ile bir yöntem kullanacaksanız, bunu görüntüleyiciye uyguladığınız div'e uyguladığınızdan emin olun.

Answer 2

Bu CSS çalışacaktı:

div.container { width: ?px; height: ?px; overflow: hidden; position: relative; } 
div.container img { position: absolute; top: (-50% of image height); left: (-50% of image width); } 

Answer 3

Görüntüyü bir div'a yapıştırmanızı ve sonra div'u ortalamanızı öneririm. Bunun nasıl yapılacağı hakkında ayrıntılı bir açıklama var here.