Выравнивание изображения HTML снизу внутри контейнера DIV - PullRequest
Новая
       13

Выравнивание изображения HTML снизу внутри контейнера DIV

38 голосов
/ 29 июня 2011

У меня есть тег div с фиксированной высотой. Большинство изображений имеют одинаковую высоту и ширину.

Я хочу выровнять изображения внизу div, чтобы они были хорошо расположены. Вот то, что я имею до сих пор: 

<div id="randomContainer">
    <div id="imageContainer">
        <img src="1.png" alt=""/>
        <img src="2.png" alt=""/>
        <img src="3.png" alt=""/>
        <img src="4.png" alt=""/>
    </div>
    <div id="navigationContainer">
        <!-- navigation stuff -->
    </div>
</div>

CSS выглядит так: 

div#imageContainer {
    height: 160px;  
    vertical-align: bottom;
    display: table-cell;
}

Мне удалось выровнять изображения внизу по атрибутам display: table-cell и vertical-align: bottom css.

Есть ли более чистый способ отображения div в виде ячейки таблицы и выравнивания изображений внизу тега DIV?

Ответы [ 4 ]

52 голосов
/ 30 августа 2012

Установите родительский div как position:relative, а внутренний элемент - position:absolute; bottom:0

46 голосов
/ 29 июня 2011

Это ваш код: http://jsfiddle.net/WSFnX/

Использование display: table-cell возможно при условии, что вы знаете, что оно не будет работать в IE6 / 7.Кроме этого, это безопасно: Есть ли недостаток в использовании `display: table-cell`on divs?

Чтобы исправить пространство внизу, добавьте vertical-align: bottom к фактическомуimg s:

http://jsfiddle.net/WSFnX/1/

Удаление пробела между изображениями сводится к следующему: альтернатива свойства CSS3 bikeshedding?

Итак,Вот демонстрация с удаленными пробелами в вашем HTML: http://jsfiddle.net/WSFnX/4/

12 голосов
/ 05 мая 2016

Flexbox могут сделать это, используя align-items: flex-end; flex-direction: column; с display: flex; или display: inline-flex;

div#imageContainer {
    height: 160px;  
    align-items: flex-end;
    display: flex;
    flex-direction: column;
}

У CSS-Tricks есть хорошее руководство для flexboxes

6 голосов
/ 13 июня 2016

<div> с некоторыми пропорциями 

div {
  position: relative;
  width: 100%;
  height: 100%;
}

<img> со своими пропорциями 

img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: auto; /* to keep proportions */
  height: auto; /* to keep proportions */
  max-width: 100%; /* not to stand out from div */
  max-height: 100%; /* not to stand out from div */
  margin: auto auto 0; /* position to bottom and center */
}
...