Як вирівняти зображення по вертикалі всередині div

Question

Ще

Arnaud Le Blanc

Question

Як вирівняти зображення по вертикалі всередині div

Як вирівняти зображення всередині містить div?

Приклад

У моєму прикладі потрібно вирівняти по вертикалі зображення <img> в <div> з class ="frame":

<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 фіксована, а висота зображення невідома. Я можу додати нові елементи у .frame, якщо це єдине рішення. Я намагаюся зробити це в Internet Explorer 7 і пізніших версіях, WebKit, Gecko.

Дивіться jsfiddle [тут][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

**Рішення для фонового зображення

Я прибрав елемент зображення взагалі і встановив його в якості фону div з класом .frame.

Принаймні, це нормально працює в Internet Explorer 8, Firefox 6 та Chrome 13.

Я перевірив, і це рішення не буде працювати для зменшення зображень, висота яких перевищує 25 пікселів. Існує властивість background-size, яка дійсно задає розмір елементу, але це CSS 3, що буде конфліктувати з вимогами Internet Explorer 7.

Я б порадив вам або переробити пріоритети браузера та дизайн для найкращих доступних браузерів, або отримати деякий код на стороні сервера для зміни розміру зображень, якщо ви хочете використовувати це рішення.

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

Joseph Marikle

4-го вересня 2011 в 5:34

Ще

Ти можеш це зробити:

Демонстрація

/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

Це працює для сучасних браузерів (2016 на момент редагування), як показано в цій демонстрації на codepen

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

Дуже важливо, щоб ви або надали зображенням клас, або використовували успадкування, щоб націлити зображення, які вам потрібно відцентрувати. У цьому прикладі ми використали .frame img {}, щоб тільки зображення, обгорнуті div з класом .frame, були відцентровані.