Вертикально центрируйте изображение жидкости в контейнере с жидкостью - PullRequest
Новая
       2

Вертикально центрируйте изображение жидкости в контейнере с жидкостью

4 голосов
/ 06 февраля 2011

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

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

<section class="photo full">

(Да, я использую элементы HTML5). Который имеет следующий CSS: 

section.photo.full { 
    display:inline-block;
    width:100%; 
    height:100%; 
    position:absolute;
    overflow:hidden; 
    text-align:center;
}

Далее изображение помещается внутрь него. В зависимости от ориентации изображения я устанавливаю ширину или высоту на 75%, а для другой оси - на авто: 

$wide = $bigimage['width'] >= $bigimage['height'] ? true: false; ?>
<img src="<?= $bigimage['url'] ?>" width="<?= $wide? "75%" : "auto"?>" height="<?= $wide? "auto" : "75%"?>"/>

Итак, у нас есть внешний контейнер с жидкостью, внутри которого изображение жидкости. Горизонтальное центрирование изображения работает, но я не могу найти способ вертикально центрировать изображение внутри его контейнера. Я исследовал методы центрирования, но большинство полагает, что контейнер или изображение имеют известную ширину или высоту. Затем есть метод display: table-cell, который мне тоже не подходит.

Я застрял. Я ищу решение CSS, но я тоже открыт для решений js.

Ответы [ 3 ]

8 голосов
/ 06 февраля 2011

Это прекрасно работает: 

section.photo.full {
  display: table;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  text-align: center;
}

section.photo.full a {
  outline: 0;
  display: table-cell;
  vertical-align: middle;
}

section.photo.full img {
  margin-top: 0;
}

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

Здесьдемо в jsfiddle:

http://jsfiddle.net/duopixel/5wzPS/

1 голос
/ 07 апреля 2016

Давайте пропустим всю чушь таблицы! :) 

<div>
    <img src="https://placehold.it/1000x1000">
</div>

div {
    position: relative;
}

img {
    position: absolute;
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

Пример: https://jsfiddle.net/te29m9fv/1/

1 голос
/ 06 февраля 2011

Может быть, это работает для вас (div - это div, обернутый вокруг вашего изображения): 

div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Пример выполнения.

...