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

Question

Ще

Джерело Non AMP-version Редагувати

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

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

Приклад

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

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.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="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 11-го липня 2019 в 7:00

Програмування

image css vertical-alignment

1-го вересня 2011 в 4:25

18 погляди

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

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

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

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

Принаймні, це нормально працює в 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

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

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

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

Це працює для сучасних браузерів (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, були відцентровані.