Как вертикально выровнять изображение внутри div

Ответ 1

Насколько мне известно, единственный (и лучший кросс-браузерный) способ - использовать помощника inline-block с height: 100% и vertical-align: middle на обоих элементах.

Итак, есть решение: http://jsfiddle.net/kizu/4RPFa/4570/

.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>

Ответ 2

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

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/

Ответ 3

Матейкрамное решение - хорошее начало, но негабаритные изображения имеют неправильное соотношение.

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

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

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

Ответ 4

Решение из трех строк:

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

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

С здесь.

Ответ 5

Чистое решение CSS:

http://jsfiddle.net/3MVPM/

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

Ответ 6

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

.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>

Ответ 7

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

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

Ответ 8

Также вы можете использовать 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>

Ответ 9

Существует супер легкое решение с flexbox!

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

Ответ 10

Вы можете попробовать установить CSS из PI в display: table-cell; vertical-align: middle;

Ответ 11

Вы можете попробовать следующий код:

.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>

Ответ 12

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

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

http://jsfiddle.net/URVKa/2/

По крайней мере, это отлично работает в Internet Explorer 8, Firefox 6 и Chrome 13.

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

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

Ответ 13

Вы могли бы сделать это:

демонстрация

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum 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";
})

Ответ 14

http://jsfiddle.net/MBs64/

.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;
}

Ключевым свойством является display: table-cell; для .frame. Div.frame отображается как встроенный с этим, поэтому вам нужно обернуть его в элемент блока.

Это работает в Firefox, Opera, Chrome, Safari и Internet Explorer 8 (и более поздних версиях).

ОБНОВИТЬ

Для Internet Explorer 7 нам нужно добавить выражение CSS:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Ответ 15

Попробуйте это решение с чистым CSS http://jsfiddle.net/sandeep/4RPFa/72/

Может быть, это главная проблема с вашим HTML. Вы не используете кавычки при определении гр lass & image height в вашем HTML.

CSS:

.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;
}

Когда я работаю с тегом img он оставляет 3 пикселя на 2 пикселя top. Теперь я уменьшаю line-height, и это работает.

CSS:

    .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 */
    }

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

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

Посмотрите в этом примере разницу между line-height в разных браузерах: разница в высоте ввода в Firefox и Chrome

Ответ 16

Я не уверен насчет Internet Explorer, но в 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;
}

Ответ 17

Мое решение: 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;
}

Ответ 18

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

Иногда это должно быть решено отображением в виде таблицы/таблицы-ячейки. Например, быстрый заголовок экрана. Это рекомендуемый способ 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>

Ответ 19

Это работает для современных браузеров (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 {} чтобы .frame img {} только изображения, заключенные в div с классом .frame.

Ответ 20

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

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

Это работает для Google Chrome очень хорошо. Попробуйте это в другом браузере.

Ответ 21

Для центрирования изображения внутри контейнера (это может быть логотип), кроме текста вроде этого:

В основном вы оборачиваете изображение

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; /* Only to align horizontally */
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}

<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

Ответ 22

Если вы можете жить с полями размером в пиксель, просто добавьте font-size: 1px; к .frame. Но помните, что теперь на .frame 1em = 1px, что означает, что вам нужно также установить поле в пикселях.

http://jsfiddle.net/feeela/4RPFa/96/

Теперь это больше не сосредоточено в Опере…

Ответ 23

У меня такая же проблема. Это работает для меня:

<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>

Ответ 24

Используя метод 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> 

Ответ 25

Вы можете использовать это:

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

Ответ 26

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

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

И CSS:

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

Ответ 27

Просто для того, чтобы это был правильный ответ, я все еще хочу опубликовать решение jQuery снова. Это работает для каждого элемента, к v_align применен класс v_align. Он будет вертикально центрирован в родительском элементе, и при изменении размера окна он будет пересчитан.

Ссылка на JSFiddle

$(document).ready(function() {
  // Define the class that vertically 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");
  });
}

Ответ 28

Лучшее решение заключается в том, что

.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;
}

Ответ 29

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

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

Ответ 30

Используйте это:

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

И вы можете варьировать font-size.