.png" height=13 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=11 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=9 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=7 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=5 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=3 /> </div>
Анна Убогих 5970
Редактировал вопрос 9-го февраля 2022 в 4:01
Peter Mortensen
Peter Mortensen
Редактировал вопрос 11-го июля 2019 в 7:00
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
Этот вопрос имеет 1 ответ на английском, чтобы прочитать их войдите в свой аккаунт.
Решение / Ответ

Единственный (и лучший кроссбраузерный) способ, насколько я знаю, - использовать помощник "встроенный блок" с "высотой: 100%" и "выравнивание по вертикали: посередине" для обоих элементов.

Итак, есть решение:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* This is required unless you put the helper span closely near the img */

    text-align: center;
    margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

Или, если вы не хотите иметь дополнительный элемент в современных браузерах и не возражаете против использования выражений Internet Explorer, вы можете использовать псевдоэлемент и добавить его в Internet Explorer, используя удобное выражение, которое выполняется только один раз для каждого элемента, поэтому проблем с производительностью не будет.:

Решение с ":до" и "выражение()" для Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/

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

    text-align: center;
    margin: 1em 0;
}

.frame:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

/* Move this to conditional comments */
.frame {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

Как это работает:

  1. Когда у вас есть два элемента "встроенного блока" рядом друг с другом, вы можете выровнять их по бокам друг друга, поэтому с помощью "выравнивание по вертикали: посередине" вы получите что-то вроде этого:

![Два выровненных блока][1]

  1. Если у вас есть блок с фиксированной высотой (в px, em или другой абсолютной единице измерения), вы можете
Хотите что-то узнать? Задавайте Ваш вопрос на нашем сайте
ru.kzen.dev

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

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/

Хотите что-то узнать? Задавайте Ваш вопрос на нашем сайте
ru.kzen.dev

Решение matejkramny - хорошее начало, но большие изображения имеют неправильное соотношение..

Вот моя вилка:

Демо: https://jsbin.com/lidebapomi/edit?html,css,output

preview


HTML:

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {
    height: 160px; /* Can be anything */
    width: 160px; /* Can be anything */
    position: relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Решение matejkramny - хорошее начало, но большие изображения имеют неправильное соотношение..

Вот моя вилка:

Демо: https://jsbin.com/lidebapomi/edit?html,css,output

preview


HTML:

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {
    height: 160px; /* Can be anything */
    width: 160px; /* Can be anything */
    position: relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Три линии-решение:

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

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

Из здесь.

Хотите что-то узнать? Задавайте Ваш вопрос на нашем сайте
ru.kzen.dev

В чистом решение Усс:

в

.frame {
  margin: 1em 0;
  height: 35px;
  width: 160px;
  border: 1px solid red;
  position: relative;
}

img {
  max-height: 25px;
  max-width: 160px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #3A6F9A;
}
<div class=frame>
  <img src="
/embedded/result,js,html,css/">
.png" height=250 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=25 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=23 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=21 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=19 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=17 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=15 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=13 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=11 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=9 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=7 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=5 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=3 /> </div>

в

Ключевые вещи

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically
 dota2pro
dota2pro
Редактировал ответ 12-го ноября 2019 в 8:23

Более современное решение, и если нет необходимости для поддержки старых браузеров, вы можете сделать это:

в

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/

    /* justify-content: center; */
    align-items: center;
}

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: auto; */
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

в

Здесь's в ручку: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Хотите что-то узнать? Задавайте Ваш вопрос на нашем сайте
ru.kzen.dev

Таким образом, вы можете сосредоточить изображение по вертикали (демо):

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

Также, вы можете использованием Flexbox для достижения правильного результата:

в

.parent {
  align-items: center; /* For vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}
<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

в

Хотите что-то узнать? Задавайте Ваш вопрос на нашем сайте
ru.kzen.dev

Есть супер просто решение адаптируемых блоков!

.frame {
    display: flex;
    align-items: center;
}

Вы могли бы попробовать установить CSS-код " пи " с дисплей: ячейки таблицы; вертикального выравнивания: средний;

Хотите что-то узнать? Задавайте Ваш вопрос на нашем сайте
ru.kzen.dev

Вы можете попробовать ниже код:

в

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
<div class="frame" style="height: 25px;">
    <img src="
/embedded/result,js,html,css/">
.png" /> </div>

в

Решение фонового изображения

Я полностью удалил элемент изображения и установил его в качестве фона div с классом .frame.

Это, по крайней мере, работает нормально на Internet Explorer 8, Firefox 6 и Chrome 13.

Я проверил, и это решение не будет работать для уменьшения изображений размером более 25 пикселей в высоту. Есть свойство background-size, которое действительно устанавливает размер элемента, но это CSS 3, что противоречит требованиям Internet Explorer 7.

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

Хотите что-то узнать? Задавайте Ваш вопрос на нашем сайте
ru.kzen.dev

Вы можете сделать это:

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";
})

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

Ключевым свойством является дисплей: стол-клеток; "за".рамка.Див.кадр отображается как inline с этим, так что вы должны обернуть его в блочный элемент.

Это работает в Firefox, Опера, хром, сафари и Internet&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;8 (и более поздних).

Обновление

Для Internet&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;7 мы должны добавить выражения в CSS:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
Хотите что-то узнать? Задавайте Ваш вопрос на нашем сайте
ru.kzen.dev

Я не уверен, что интернет&ампер;усилитель; nbsp;Explorer, но под Firefox и Chrome, Если у вас есть ИМГ в див контейнер, следующий контент CSS должен работать. По крайней мере для меня это работает хорошо:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

Попробуйте это решение на чистом CSS

Может быть, это основная проблема с ваш HTML. Вы'повторно не использовать цитаты, Когда вы определить с'lass&высота изображения в HTML.

Усс:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    position: relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height: 0;
    margin: 0 auto;
    max-height: 25px;
}

Когда я работаю с тегом ИМГ это'уходя 3 пикселя на 2 пикселя пространства от топ. Сейчас высота строки мне умаляться``, и это's работает.

Усс:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height: 0;    
        max-height: 25px;
        max-width: 160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* WebKit browsers */
    }

Свойство строки-высота отображается по-разному в разных браузерах. Итак, мы должны определить различные линии-высота браузеров собственность.

Проверить этот пример: http://jsfiddle.net/sandeep/4be8t/11/

Проверить этот пример про линии-высота-разному в разных браузерах: https://stackoverflow.com/questions/7229568/input-height-differences-in-firefox-and-chrome

Хотите что-то узнать? Задавайте Ваш вопрос на нашем сайте
ru.kzen.dev

Мое решение: [

][1]

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

Решение с помощью таблицы и ячеек таблицы

Иногда она должна быть решена путем отображения таблицы/таблицы-ячейка. Например, быстрый экран. Это рекомендуемый способ на В3 тоже. Я рекомендую вам проверить эту ссылку, называется центрирования блока или изображения от W3C.org.

Советы, используемые здесь, являются:

  • Абсолютная контейнер позиционирования отображаются в виде таблицы
  • Отображается вертикально выравнивается по материалам Центра как ячейки таблицы

в

.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
}
<div class="container">
  <div class="content">
    <h1 style="text-align:center">Peace in the world</h1>
 </div>
</div>

в

Лично я вообще не согласен по поводу использования помощников для этой цели.

Хотите что-то узнать? Задавайте Ваш вопрос на нашем сайте
ru.kzen.dev

Представьте, что у вас есть

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

И CSS:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

Простой способ, который работает для меня:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Она работает очень хорошо для Гугл Хром. Попробовать в другом браузере.

Хотите что-то узнать? Задавайте Ваш вопрос на нашем сайте
ru.kzen.dev
Похожие сообщества 7
Возникли проблемы с HTML или CSS? – пиши сюда, обсудим и предложим самое лучшее решение. @javascript_ru @frontend_ru Каналы: @defront @htmlshit 🟡 Ищешь чат? @it_chats 🟡 Мы всегда рады помочь, но у нас есть правила. ВАЖНО: http://nometa.xyz
Верстка сайтов HTML/CSS/JS/PHP
2 998 пользователей
Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Библиотека верстальщика: @weblibrary Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @bigmarketolog Автор: @M_Boroda
Frontend_ru
2 737 пользователей
Русскоговорящее сообщество фронтенд разработчиков Каналы: @frontendnoteschannel @defront Чаты: @bem_ru @javascript_ru @css_ru Важно! http://nometa.xyz
JavaScript чат | HTML 5 & CSS 3
2 275 пользователей
Чат для тех кому нужна помощь по коду, или есть какие-то вопросы по реализации задачи в JavaScript. 💼 По вопросам: @dictor_inc ✏️ Правила: t.me/javascript_alert/3070 Практика: https://t.me/joinchat/GmZ5CkHxDCszM2ko
БЭМ
952 пользователей
Про БЭМ (https://ru.bem.info) Офтопим про фронтенд в https://t.me/yalovefrontend