Как вертикально выровнять изображение внутри div

Как вы можете выровнять изображение внутри содержащего div?

Пример

В моем примере мне нужно вертикально центрировать в

с помощью class ="frame ":

Высота .frame фиксирована, а высота изображения неизвестна. Я могу добавить новые элементы в .frame, если это единственное решение. Я пытаюсь сделать это на Internet & nbsp; Explorer & nbsp; 7 и более поздние версии, WebKit, Gecko.

См. Jsfiddle здесь .

.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;
}

1315
задан Peter Mortensen 11 July 2019 в 19:00
поделиться

3 ответа

Решение из трех строк:

position: relative;
top: 50%;
transform: translateY(-50%);

Это относится ко всему.

Из здесь .

214
ответ дан Peter Mortensen 11 July 2019 в 19:00
поделиться

Это может быть полезно:

div {
    position: relative;
    width: 200px;
    height: 200px;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.image {
    min-height: 50px
}

Ссылка: http://www.student.oulu.fi/~laurirai/www/css/middle/

486
ответ дан Peter Mortensen 11 July 2019 в 19:00
поделиться

Предположите, что Вы имеете

<div class="wrap">
    <img src="#">
</div>

И css:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}
5
ответ дан 19 December 2019 в 20:15
поделиться
Другие вопросы по тегам:

Похожие вопросы: