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

Question

Daha

Arnaud Le Blanc

Question

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="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.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="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=250 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=25 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=23 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=21 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=19 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=17 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

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

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

Joseph Marikle

2011ösp34ös17 Eylül 2011 в 5:34

Daha

Bunu yapabilirsin:

Demo

/embedded/result,js,html,css/">

CSS

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

    text-align: center; 
    margin: em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 60px;
    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.