Div içindeki bir görüntü nasıl dikey olarak hizalanır?

Question

Daha

Kaynak Non AMP-version Düzenle

Div içindeki bir görüntü nasıl dikey olarak hizalanır?

Bir görüntüyü div içeren bir görüntünün içine nasıl hizalayabilirsiniz?

Örnek

Örneğimde, <img>yi <div> içinde class ="frame" ile dikey olarak ortalamam gerekiyor:

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame'in yüksekliği sabittir ve görüntünün yüksekliği bilinmemektedir. Eğer tek çözüm buysa .frame içine yeni elemanlar ekleyebilirim. Bunu Internet Explorer 7 ve sonrası, WebKit, Gecko üzerinde yapmaya çalışıyorum.

Jsfiddle'a bakın [burada][1].

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>

Peter Mortensen

Edited question 2019ösp0ös19 Temmuz 2019 в 7:00

Programlama

image css vertical-alignment

2011ösp25ös16 Eylül 2011 в 4:25

30 görünümler

Benjamin Udink ten Cate · Answer 1 · 2011-09-04T13:17:02+00:00

Arka plan görüntüsü çözümü

Resim öğesini tamamen kaldırdım ve .frame sınıfı ile div'in arka planı olarak ayarladım

http://jsfiddle.net/URVKa/2/

Bu en azından Internet Explorer 8, Firefox 6 ve Chrome 13'te iyi çalışıyor.

Kontrol ettim ve bu çözüm 25 pikselden daha büyük görüntüleri küçültmek için işe yaramayacak. Öğenin boyutunu ayarlayan background-size adında bir özellik var, ancak CSS 3 olduğundan Internet Explorer 7 gereksinimleriyle çakışacaktır.

Bu çözümü kullanmak istiyorsanız, ya tarayıcı önceliklerinizi yeniden belirlemenizi ve mevcut en iyi tarayıcılar için tasarım yapmanızı ya da görüntüleri yeniden boyutlandırmak için sunucu tarafı kodu almanızı tavsiye ederim.

Joseph Marikle · Answer 2 · 2011-09-04T17:34:04+00:00

Bunu yapabilirsin:

Demo

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}

JavaScript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

anglimasS · Answer 3 · 2011-09-01T17:29:55+00:00

Bu codepen'deki demo'da gösterildiği gibi modern tarayıcılar (düzenleme sırasında 2016) için çalışır

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

Görüntülere bir sınıf vermeniz ya da ortalanması gereken görüntüleri hedeflemek için kalıtım kullanmanız çok önemlidir. Bu örnekte .frame img {} kullandık, böylece yalnızca .frame sınıfına sahip bir div tarafından sarılan görüntüler hedeflenecekti.