Как вы можете выровнять изображение внутри содержимого 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 здесь .
.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>
css
image
vertical-alignment
Арно Ле Блан
источник
источник
Ответы:
Единственное (и лучший кросс-браузер) способ , как я знаю , является использование
inline-block
помощника сheight: 100%
иvertical-align: middle
на обоих элементах.Так что есть решение: http://jsfiddle.net/kizu/4RPFa/4570/
Показать фрагмент кода
Или, если вы не хотите иметь дополнительный элемент в современных браузерах и не возражаете против использования выражений Internet Explorer, вы можете использовать псевдоэлемент и добавить его в Internet Explorer с помощью удобного выражения, которое выполняется только один раз для каждого элемента так что проблем с производительностью не будет:
Решение с
:before
иexpression()
для Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/Показать фрагмент кода
Как это работает:
Когда у вас есть два
inline-block
элемента рядом друг с другом, вы можете выровнять друг друга по сторонам, так чтоvertical-align: middle
вы получите что-то вроде этого:Когда у Вас есть блок с фиксированной высотой (в
px
,em
или другой абсолютной единицей), вы можете установить высоту внутренних блоков%
.inline-block
сheight: 100%
в блоке с фиксированной высотой будет выравнивать другойinline-block
элемент в ней (<img/>
в вашем случае) вертикально рядом с ним.источник
.frame
и.frame:before
. Предлагаемое здесь решение - добавитьmargin-left: -4px
в.frame
. Надеюсь это поможет.<img src=""/>
НЕ находится внутри<span></span>
добавленного помощника. Это снаружи. Я просто потянул каждую прядь моих волос, не осознавая этого.Это может быть полезно:
источник
position:fixed;
Решение matejkramny - хорошее начало, но негабаритные изображения имеют неправильное соотношение.
Вот моя вилка:
Демонстрация: https://jsbin.com/lidebapomi/edit?html,css,output
HTML:
CSS:
источник
top: 0;
. Это приводит к тому,bottom: 0;
что применяется только вертикально.Трехстрочное решение:
Это относится ко всему.
От сюда .
источник
position: absolute;
потому что вам нужна плавная ширина.Чистое решение CSS:
Ключевые вещи
источник
Для более современного решения, и если нет необходимости поддерживать устаревшие браузеры, вы можете сделать это:
Вот ручка: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e
источник
align-self
для отдельных предметовalign-self
в том, что гибкие элементы будут растягивать высоту родительского контейнера.Таким образом, вы можете центрировать изображение по вертикали ( демо ):
источник
font-size: 0
дляdiv
. Для довольно больших контейнеров вы можете пропустить это, но если у васdiv
100px и img 80px, то это будет на несколько пикселей ниже.Также вы можете использовать Flexbox для достижения правильного результата:
источник
Есть супер простое решение с flexbox!
источник
Вы можете попробовать установить CSS для PI в
display: table-cell; vertical-align: middle;
источник
PI
"?Вы можете попробовать следующий код:
источник
Решение для фонового изображения
Я полностью удалил элемент изображения и установил его в качестве фона элемента div с классом
.frame
http://jsfiddle.net/URVKa/2/
По крайней мере, это отлично работает в Internet Explorer 8, Firefox 6 и Chrome 13.
Я проверил, и это решение не будет работать, чтобы сжать изображения размером более 25 пикселей. Есть свойство под названием
background-size
которое устанавливает размер элемента, но это CSS 3, который будет противоречить требованиям Internet Explorer 7.Я бы посоветовал вам либо переделать приоритеты браузера и разработать дизайн для наилучших доступных браузеров, либо получить некоторый серверный код для изменения размера изображений, если вы хотите использовать это решение.
источник
Представь, что у тебя есть
И CSS:
источник
Вы могли бы сделать это:
демонстрация
http://jsfiddle.net/DZ8vW/1
CSS
JavaScript
источник
http://jsfiddle.net/MBs64/
Ключевое свойство
display: table-cell;
для.frame
.Div.frame
отображается как встроенный в этом, так что вам нужно обернуть его в элемент блока.Это работает в Firefox, Opera, Chrome, Safari и Internet Explorer 8 (и более поздних версиях).
ОБНОВИТЬ
Для Internet Explorer 7 нам нужно добавить выражение CSS:
источник
Мое решение: http://jsfiddle.net/XNAj6/2/
источник
Это работает для современных браузеров (2016 во время редактирования), как показано в этой демонстрации на codepen
Очень важно, чтобы вы либо присваивали изображениям класс, либо использовали наследование для нацеливания на изображения, которые вам нужно отцентрировать. В этом примере мы использовали
.frame img {}
так, чтобы.frame
нацеливались только изображения, завернутые в div с классом .источник
Попробуйте это решение с чистым CSS http://jsfiddle.net/sandeep/4RPFa/72/
Может быть, это главная проблема с вашим HTML. Вы не используете кавычки, когда определяете c
lass
&image height
в своем HTML.CSS:
Когда я работаю с
img
тегом, он оставляет от 3 до 2 пикселейtop
. Теперь я уменьшаюline-height
, и это работает.CSS:
line-height
Свойство оказывается по- разному в разных браузерах. Итак, мы должны определить разныеline-height
браузеры свойств.Проверьте этот пример: http://jsfiddle.net/sandeep/4be8t/11/
Посмотрите на этот пример на примере
line-height
разных браузеров: различия в высоте ввода в Firefox и Chromeисточник
Я не уверен , что Internet Explorer, но в Firefox и Chrome, если у вас есть
img
вdiv
контейнере, следующее содержание CSS должно работать. По крайней мере, для меня это работает хорошо:источник
display:table-cell;
% не принимает ширинуРешение с использованием таблицы и ячеек таблицы
Иногда это должно быть решено отображением в виде таблицы / таблицы-ячейки. Например, быстрый заголовок экрана. Это рекомендуемый способ W3 также. Я рекомендую вам проверить эту ссылку, которая называется Центрирование блока или изображения с W3C.org.
Советы, используемые здесь:
Лично я действительно не согласен с использованием помощников для этой цели.
источник
Простой способ, который работает для меня:
Это работает для Google Chrome очень хорошо. Попробуйте это в другом браузере.
источник
Для центрирования изображения внутри контейнера (это может быть логотип), кроме текста вроде этого:
В основном вы оборачиваете изображение
источник
Если вы можете жить с полями в пикселях, просто добавьте
font-size: 1px;
к.frame
. Но помните, что теперь на.frame
1em = 1px, а это значит, вам нужно также установить поле в пикселях.http://jsfiddle.net/feeela/4RPFa/96/
Теперь это больше не по центру в Опере ...
источник
У меня такая же проблема. Это работает для меня:
источник
Вы можете использовать это:
источник
Использование
table
иtable-cell
method делают работу, особенно потому, что вы нацелены и на некоторые старые браузеры, я создаю для вас фрагмент, который вы можете запустить и проверить результат:источник
Я играл с использованием заполнения для выравнивания центра. Вам нужно будет определить размер внешнего контейнера верхнего уровня, но размер внутреннего контейнера должен измениться, и вы можете установить отступ в различных процентных значениях.
jsfiddle
источник
Лучшее решение заключается в том, что
источник
Используйте это:
И вы можете варьироваться
font-size
.источник
Хотите выровнять изображение, которое имеет после текста / заголовка и оба внутри div?
Смотрите на JSfiddle или Run Code Snippet.
Просто убедитесь, что у вас есть идентификатор или класс для всех ваших элементов (div, img, title и т. Д.).
Для меня это решение работает во всех браузерах (для мобильных устройств вы должны адаптировать свой код с помощью: @media).
источник