Как вертикально выровнять изображение внутри div?
вопрос
как вы можете выровнять изображение внутри, содержащей div
?
пример
в моем примере мне нужно вертикально центрировать <img>
на <div>
С class ="frame
" :
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
.frame
высота фиксирована, а высота изображения неизвестна. Я могу добавить новые элементы в .frame
если это единственное решение. Я пытаюсь сделать это на IE≥7, Webkit, Gecko.
см. jsfiddle здесь
.frame {
height: 25px; /* equals max 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>
30 ответов
единственный (и лучший кросс-браузер) способ, как я знаю, это использовать inline-block
помощник с height: 100%
и vertical-align: middle
на обоих элементах.
Итак, есть решение:http://jsfiddle.net/kizu/4RPFa/4570/
.frame {
height: 25px; /* equals max 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>
или, если вы не хотите иметь дополнительный элемент в современных браузерах и не возражаете использовать выражения IE, вы можете использовать псевдоэлемент и добавить его в IE, используя удобное выражение, которое работает только один раз на элемент, поэтому не будет никаких проблем с производительностью:
раствор :before
и expression()
для IE:http://jsfiddle.net/kizu/4RPFa/4571/
.frame {
height: 25px; /* equals max 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>
как работает:
-
если у вас есть два
inline-block
элементы рядом друг с другом, вы можете выровнять друг с другом, так что сvertical-align: middle
вы получите что-то вроде это: когда у вас есть блок с фиксированной высотой (в
px
,em
или другой абсолютный блок), вы можете установить высоту внутренних блоков в%
.- так, добавление одного
inline-block
Сheight: 100%
в блоке с фиксированной высотой согласовать другоеinline-block
элемент в его (<img/>
в вашем случае) вертикально рядом с ним.
Это может быть полезно:
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 / средний/
решение matejkramny является хорошим началом, но негабаритные изображения имеют неправильное соотношение.
Вот моя вилка:
демо:https://jsbin.com/lidebapomi/edit?html, css, выход
ФОРМАТ 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;
}
3 решение:
position: relative;
top: 50%;
transform: translateY(-50%);
Это относится ко всему.
С здесь.
чистое решение CSS:
CSS-код:
.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;
}
ключевые вещи
// 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
таким образом, вы можете сосредоточить изображение по вертикали (демо):
div{
height:150px; //IE7fix
line-height: 150px;
}
img{
vertical-align: middle;
margin-bottom:0.25em;
}
для тех, кто приземлился на этот пост и заинтересован в более современном решении, и которые не нуждаются в поддержке устаревших браузеров, вы можете сделать это:
.frame {
display: flex;
/*Uncomment below to center horizontally*/
/*justify-content: center;*/
align-items: center;
}
img {
height: 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>
вот ручка:http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e
решение фонового изображения
Я удалил элемент изображения все вместе и установил его в качестве фона div с классом .frame
это, по крайней мере, отлично работает на IE8, FF6 и Chrome13
Я проверил, это решение не будет работать для сжатия изображений больше высоты 25px. Существует свойство под названием background-size
который устанавливает размер элемента, но это CSS3, который будет конфликтовать с Требование IE7.
Я бы посоветовал вам либо переделать приоритеты браузера и дизайн для лучших доступных браузеров, либо получить код на сервере для изменения размера изображений, Если вы хотите использовать это решение
Вы можете попробовать ниже код
.frame{
display:flex;
justify-content: center;
align-items: center;
width:100%;
}
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
вы могли бы сделать это:
демо
в CSS
.frame {
height: 25px; /* equals max image height */
line-height: 25px;
width: 160px;
border: 1px solid red;
text-align: center; margin: 1em 0;
position: relative; /* Changes here... */
}
img {
background: #3A6F9A;
max-height: 25px;
max-width: 160px;
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 max 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;
}
ключевым свойством является display: table-cell; for .рамка. Элемент div.рамка отображается как встроенная с этим, поэтому вам нужно обернуть ее в элемент блока.
это работает в FF, Opera, Chrome, Safari и IE8+.
обновление
для IE7 нам нужно добавить выражение css:
*:first-child+html img {
position: relative;
top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
не уверен в IE, но под Firefox и Chrome, Если у вас есть img
на div
контейнер, следующий 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 http://jsfiddle.net/sandeep/4RPFa/72/
Может быть, основная проблема с вашим html. Вы не используете цитату при определении class
& image height
в вашем html.
CSS:
.frame {
height: 25px; /* equals max 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;
}
EDIT:
когда я работаю с img
тег как 3px to 2px
пространство top
. Теперь я уменьшаюсь line-height
и это работает.
css:
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
margin: 1em 0;
text-align: center;
line-height:22px;
*:first-child+html line-height:24px; /* for IE7 */
}
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 */
}
the line-height
свойства render
по-разному в разных браузерах. Итак, мы должны определить разные line-height
- браузеры собственность
этот http://jsfiddle.net/sandeep/4be8t/11/
проверьте этот пример о line-height
разные в разных браузерах разница в высоте ввода в Firefox и Chrome
мое решение: http://jsfiddle.net/XNAj6/2/
<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;
}
кроме того, вы можете использовать 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>
простой способ, который работает для меня:
img {
vertical-align: middle;
display: inline-block;
position: relative;
}
работает для Google Chrome очень хорошо. Попробуйте это в другом браузере.
это работает для современных браузеров (2016 во время редактирования), как показано в этой демо на codepen
.frame {
height: 25px;
line-height: 25px;
width: 160px;
border: 1px solid #83A7D3;
}
.frame img {
background: #3A6F9A;
display:inline-block;
vertical-align: middle;
}
очень важно, чтобы вы либо дали изображениям класс, либо использовали наследование для таргетинга изображений, которые вам нужны по центру. В этом примере мы использовали .frame img {}
Так что только изображения, обернутые div с классом .frame
будут направлены.
РЕШЕНИЕ С ИСПОЛЬЗОВАНИЕМ ТАБЛИЦЫ И ЯЧЕЙКИ ТАБЛИЦЫ
иногда это должно быть решено путем отображения в виде таблицы / таблицы-ячейки. Например быстрый экран. Это также рекомендуемый способ W3. Я рекомендую вам проверить эту ссылку под названием центрирования вещи от 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>
лично я на самом деле не согласен с использованием помощников для этой цели
Если вы можете жить с полями размером с пиксель, просто добавьте font-size: 1px;
до .frame
. Но помните, что теперь на то .frame
1em = 1px, что означает, что вам также нужно установить маржу в пикселях.
http://jsfiddle.net/feeela/4RPFa/96/
EDIT: теперь его больше не центрируется в Opera...
для центрирования изображения внутри контейнера (это может быть логотип) кроме какой-то текст вроде этого:
в основном вы обертываете изображение
.outer-frame {
border: 1px solid red;
min-height: 200px;
text-align: center; //only for align horizontally
}
.wrapper{
line-height: 200px;
border: 2px dashed blue;
border-radius: 20px;
margin: 50px
}
img {
//height: auto;
vertical-align: middle;
}
<div class="outer-frame">
<div class="wrapper">
some text
<img src="http://via.placeholder.com/150x150">
</div>
</div>
У меня была та же проблема. Это работает для меня:
<style type="text/css">
div.parent {
position: relative;
}
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>
используя table
и table-cell
метод делает работу, особенно потому, что вы ориентируетесь на некоторые старые браузеры, а также я создаю фрагмент для вас, который вы можете запустить и проверить результат:
.wrapper {
position: relative;
display: table;
width: 300px;
height: 200px;
}
.inside {
vertical-align: middle;
display: table-cell;
}
<div class="wrapper">
<div class="inside">
<p>Centre me please!!!</p>
</div>
<div class="inside">
<img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>
</div>
вы можете использовать это:
.loaderimage {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px;/*50% of the height*/
margin-left: -30px;
}
лучшим решением является то, что
.block{
/* decor */
padding:0 20px;
background:#666;
border:2px solid #fff;
text-align:center;
/* important */
min-height:220px;
width:260px;
white-space:nowrap;
}
.block:after{
content:'';
display:inline-block;
height:220px; /* the same as min-height */
width:1px;
overflow:hidden;
margin:0 0 0 -5px;
vertical-align:middle;
}
.block span{
vertical-align:middle;
display:inline-block;
white-space:normal;
}
Я играл с использованием прокладки для выравнивания центра. Вам нужно будет определить размер внешнего контейнера верхнего уровня, но внутренний контейнер должен изменить размер, и вы можете установить заполнение на разные процентные значения.
<div class='container'>
<img src='image.jpg' />
</div>
.container {
padding: 20%;
background-color: blue;
}
img {
width: 100%;
}
старая ссылка JSFiddle, которую я разместил здесь, больше не работала, это, вероятно, причина downvote. Только ради этого ответа я еще раз хочу опубликовать решение на jQuery. Это работает для каждого элемента, который имеет v_align
класс применяется к нему. Он будет вертикально центрирован в Родительском и при изменении размера окна будет пересчитан.
$(document).ready(function() {
// define the class that vertial aligns stuff
var objects = '.v_align';
// initial setup
verticalAlign(objects);
// register resize event listener
$(window).resize(function() {
verticalAlign(objects);
});
});
function verticalAlign(selector) {
$(selector).each(function(val) {
var parent_height = $(this).parent().height();
var dif = parent_height - $(this).height()
// should only work if the parent is larger than the element
var margin_top = dif > 0 ? dif/2 : 0;
$(this).css("margin-top", margin_top + "px");
});
}
Как насчет этого?
position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;
и вы можете варьировать font-size
хотите выровнять изображение, которое имеет после текста / заголовка, и оба находятся внутри div?
см. На JSfiddle или запустить фрагмент кода.
просто убедитесь, что у всех ваших элементов(div, img, title и т. д.) Есть ID или класс.
для меня это решение работает во всех браузерах (для мобильных устройств вы должны адаптировать свой код с помощью: @media).
h2.h2red {
color: red;
font-size: 14px;
}
.mydivclass {
margin-top: 30px;
display: block;
}
img.mydesiredclass {
margin-right: 10px;
display: block;
float: left;/*If you want to allign the text with an image on the same row*/
width: 100px;
heght: 100px;
margin-top: -40px/*Change this value to adapt to your page*/;
}
<div class="mydivclass">
<br />
<img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
<h2 class="h2red">Text alligned after image inside a div by negative manipulate the img postion</h2>
</div>