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

Question

Как вы можете выровнять изображение внутри содержащего div?

Пример

В моем примере мне нужно вертикально центрировать <img> в <div> с помощью *Высота 1008 * ":

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

Answer 1

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

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

Он отлично работает для Google Chrome.Попробуйте это в другом браузере.

Answer 2

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

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

Теперь он больше не центрируется в Opera...

Answer 3

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

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

Answer 4

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

Answer 5

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

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

Answer 6

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

 .div{
    position: relative;
    overflow: hidden;
 }
 .bantop img {
    position: absolute;
    margin: auto;
    width: 103%;
    height: auto;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
  }

Я использую его в нескольких проектах, и он работает как шарм.

Answer 7

Вы можете использовать макет grid для вертикального центрирования изображения.

.frame {
  display: grid;
  grid-template-areas: "."
                       "img"
                       "."
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: auto;
}
.frame img {
  grid-area: img;
}

Это создаст макет сетки с 3 рядами по 1 столбцу с безымянными проставками шириной 1 фракция вверху и внизу иобласть с именем img из auto высота (размер содержимого).

img будет использовать пространство, которое он предпочитает, а распорки сверху и снизу будут использовать оставшуюся высоту, разделенную на два равныхдроби, в результате чего элемент img будет центрирован по вертикали.

http://jsfiddle.net/Kissaki0/4RPFa/20713/

Answer 8

Этот код хорошо работает для меня.

<style>
    .listing_container{width:300px; height:300px;font: 0/0 a;}
    .listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}
    .listing_container img{ display: inline-block; vertical-align: middle;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}
<style>

<div class="listing_container">
    <img src="http://www.advancewebsites.com/img/theme1/logo.png">
</div>

Answer 9

Вы можете использовать структуру таблицы внутри div

<div class="frame">
     <table width="100%">
         <tr>
            <td vertical-align="middle" align="center" height="25">
                <img src="https://jsfiddle.net/img/logo.png" >  
            </td>
        </tr>
    </table>
</div>

Answer 10

Хотите выровнять изображение, которое имеет после текста / заголовка и оба находятся внутри div?

См. На JSfiddle или Выполнить фрагмент кода.

Просто будьтеобязательно иметь идентификатор или класс на всех ваших элементах (div, img, title и т. д.).

Для меня это решение работает во всех браузерах (для мобильных устройств вы должны адаптировать свой код с помощью: @СМИ).

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 aligned after image inside a div by negative manipulate the img position</h2>
</div>