Дополнительно
Как вертикально выровнять изображение внутри 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>
1360
20
Единственный (и лучший кроссбраузерный) способ, насколько я знаю, - использовать помощник "встроенный блок" с "высотой: 100%" и "выравнивание по вертикали: посередине" для обоих элементов.
Итак, есть решение: http://jsfiddle.net/kizu/4RPFa/4570/
Или, если вы не хотите иметь дополнительный элемент в современных браузерах и не возражаете против использования выражений Internet Explorer, вы можете использовать псевдоэлемент и добавить его в Internet Explorer, используя удобное выражение, которое выполняется только один раз для каждого элемента, поэтому проблем с производительностью не будет.:
Решение с ":до" и "выражение()" для Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/
Как это работает:
![Два выровненных блока][1]
px
,em
или другой абсолютной единице измерения), вы можетеЭто может быть полезно:
Ссылка: http://www.student.oulu.fi/~laurirai/www/css/middle/
Решение matejkramny - хорошее начало, но большие изображения имеют неправильное соотношение..
Вот моя вилка:
Демо: https://jsbin.com/lidebapomi/edit?html,css,output
HTML:
CSS:
Решение matejkramny - хорошее начало, но большие изображения имеют неправильное соотношение..
Вот моя вилка:
Демо: https://jsbin.com/lidebapomi/edit?html,css,output
HTML:
CSS:
Три линии-решение:
Это относится ко всему.
Из здесь.
В чистом решение Усс:
в
в
Ключевые вещи
Более современное решение, и если нет необходимости для поддержки старых браузеров, вы можете сделать это:
в
в
Здесь's в ручку: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e
Таким образом, вы можете сосредоточить изображение по вертикали (демо):
Также, вы можете использованием Flexbox для достижения правильного результата:
в
Есть супер просто решение адаптируемых блоков!
Вы могли бы попробовать установить CSS-код " пи " с
дисплей: ячейки таблицы; вертикального выравнивания: средний;
Вы можете попробовать ниже код:
в
в
Решение фонового изображения
Я полностью удалил элемент изображения и установил его в качестве фона div с классом
.frame
.http://jsfiddle.net/URVKa/2/
Это, по крайней мере, работает нормально на Internet Explorer 8, Firefox 6 и Chrome 13.
Я проверил, и это решение не будет работать для уменьшения изображений размером более 25 пикселей в высоту. Есть свойство
background-size
, которое действительно устанавливает размер элемента, но это CSS 3, что противоречит требованиям Internet Explorer 7.Я бы посоветовал вам либо пересмотреть приоритеты браузеров и разработать дизайн для лучших из доступных браузеров, либо сделать код на стороне сервера для изменения размера изображений, если вы хотите использовать это решение.
Вы можете сделать это:
Demo
http://jsfiddle.net/DZ8vW/1
CSS
JavaScript
http://jsfiddle.net/MBs64/
Ключевым свойством является дисплей: стол-клеток; "за".рамка
.
Див.кадр отображается как inline с этим, так что вы должны обернуть его в блочный элемент.Это работает в Firefox, Опера, хром, сафари и Internet&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;8 (и более поздних).
Обновление
Для Internet&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;7 мы должны добавить выражения в CSS:
Я не уверен, что интернет&ампер;усилитель; nbsp;Explorer, но под Firefox и Chrome, Если у вас есть
ИМГ
вдив
контейнер, следующий контент CSS должен работать. По крайней мере для меня это работает хорошо:Попробуйте это решение на чистом CSS http://jsfiddle.net/sandeep/4RPFa/72/
Может быть, это основная проблема с ваш HTML. Вы'повторно не использовать цитаты, Когда вы определить с'lass
&
высота изображения в HTML.Усс:
Когда я работаю с тегом
ИМГ
это'уходя 3 пикселя на 2 пикселя пространства оттоп
. Сейчас высота строки мне умаляться``, и это's работает.Усс:
Свойство
строки-высота
отображается по-разному в разных браузерах. Итак, мы должны определить различные линии-высота браузеров собственность.Проверить этот пример: http://jsfiddle.net/sandeep/4be8t/11/
Проверить этот пример про линии-высота-разному в разных браузерах: https://stackoverflow.com/questions/7229568/input-height-differences-in-firefox-and-chrome
Мое решение: [http://jsfiddle.net/XNAj6/2/][1]
Решение с помощью таблицы и ячеек таблицы
Иногда она должна быть решена путем отображения таблицы/таблицы-ячейка. Например, быстрый экран. Это рекомендуемый способ на В3 тоже. Я рекомендую вам проверить эту ссылку, называется центрирования блока или изображения от W3C.org.
Советы, используемые здесь, являются:
в
в
Лично я вообще не согласен по поводу использования помощников для этой цели.
Представьте, что у вас есть
И CSS:
Простой способ, который работает для меня:
Она работает очень хорошо для Гугл Хром. Попробовать в другом браузере.