Единственный (и лучший кроссбраузерный) способ, насколько я знаю, - использовать помощник "встроенный блок" с "высотой: 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;
}
Или, если вы не хотите иметь дополнительный элемент в современных браузерах и не возражаете против использования выражений Internet Explorer, вы можете использовать псевдоэлемент и добавить его в Internet Explorer, используя удобное выражение, которое выполняется только один раз для каждого элемента, поэтому проблем с производительностью не будет.:
Решение с ":до" и "выражение()" для Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/
Когда у вас есть два элемента "встроенного блока" рядом друг с другом, вы можете выровнять их по бокам друг друга, поэтому с помощью "выравнивание по вертикали: посередине" вы получите что-то вроде этого:
![Два выровненных блока][1]
Если у вас есть блок с фиксированной высотой (в px, em или другой абсолютной единице измерения), вы можете
// 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
Более современное решение, и если нет необходимости для поддержки старых браузеров, вы можете сделать это:
в
.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 с классом .frame.
Это, по крайней мере, работает нормально на Internet Explorer 8, Firefox 6 и Chrome 13.
Я проверил, и это решение не будет работать для уменьшения изображений размером более 25 пикселей в высоту. Есть свойство background-size, которое действительно устанавливает размер элемента, но это CSS 3, что противоречит требованиям Internet Explorer 7.
Я бы посоветовал вам либо пересмотреть приоритеты браузеров и разработать дизайн для лучших из доступных браузеров, либо сделать код на стороне сервера для изменения размера изображений, если вы хотите использовать это решение.
Ключевым свойством является дисплей: стол-клеток; "за".рамка.Див.кадр отображается как inline с этим, так что вы должны обернуть его в блочный элемент.
Это работает в Firefox, Опера, хром, сафари и Internet&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;8 (и более поздних).
Обновление
Для Internet&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;7 мы должны добавить выражения в CSS:
Я не уверен, что интернет&ампер;усилитель; nbsp;Explorer, но под Firefox и Chrome, Если у вас есть ИМГ в див контейнер, следующий контент CSS должен работать. По крайней мере для меня это работает хорошо:
Иногда она должна быть решена путем отображения таблицы/таблицы-ячейка. Например, быстрый экран. Это рекомендуемый способ на В3 тоже. Я рекомендую вам проверить эту ссылку, называется центрирования блока или изображения от W3C.org.
Советы, используемые здесь, являются:
Абсолютная контейнер позиционирования отображаются в виде таблицы
Отображается вертикально выравнивается по материалам Центра как ячейки таблицы
Чат для тех кому нужна помощь по коду, или есть какие-то вопросы по реализации задачи в JavaScript.
💼 По вопросам: @dictor_inc
✏️ Правила: t.me/javascript_alert/3070
Практика: https://t.me/joinchat/GmZ5CkHxDCszM2ko