Вертикально выравнивать изображение внутри div с чувствительной высотой

У меня есть следующий код, который устанавливает контейнер с высотой, которая изменяется с шириной при изменении размера браузера (для поддержания квадратного соотношения сторон).

HTML

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Как я могу вертикально выровнять IMG внутри контейнера? Все мои изображения имеют переменную высоту, и контейнер не может иметь фиксированную высоту/высоту линии, потому что он реагирует... Пожалуйста, помогите!

ОТВЕТЫ

Ответ 1

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

Вертикальное выравнивание

1). В этом подходе мы создаем элемент inline-block (псевдо) в качестве первого (или последнего) дочернего элемента родителя и устанавливаем его свойство height на 100% чтобы взять всю высоту своего родителя.

2) Кроме того, добавление vertical-align: middle поддерживает встроенные (-block) элементы в середине пространства строк. Таким образом, мы добавляем объявление CSS к первому ребенку и нашему элементу (изображению).

3) Наконец, чтобы удалить символ пробела между встроенными (-block) элементами, мы могли бы установить размер шрифта родителя равным нулю на font-size: 0;.

Примечание. Я использовал Nicolas Gallagher метод замены изображений следующим образом.

Каковы преимущества?

  • Контейнер (родительский) может иметь динамические размеры.

  • Нет необходимости явно указывать размеры элемента изображения.

  • Мы можем легко использовать этот подход для выравнивать элемент <div> по вертикали; который может иметь динамический контент (высота и/или ширина). Но обратите внимание, что вам нужно повторно установить свойство font-size для div, чтобы отобразить внутренний текст. Онлайн-демонстрация.

<div class="container">
    <div id="element"> ... </div>
</div>

.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

Выход

Vertically align an element in its container

Реагирующий контейнер

Этот раздел не будет отвечать на вопрос, поскольку OP уже знает, как создать отзывчивый контейнер. Однако я объясню, как это работает.

Чтобы высота элемента контейнера менялась с его шириной (с учетом соотношения сторон), мы могли бы использовать процентное значение для свойства top/bottom padding.

A процентное значение в верхнем/нижнем заполнении или полях относится к ширине содержащего блока.

Например:

.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

Вот онлайн-демонстрация. Прокомментируйте строки снизу и измените размер панели, чтобы увидеть эффект.

Кроме того, мы могли бы применить свойство padding к манекену или псевдо-элементу :before/:after для достижения того же результата. Но note, что в этом случае процентное значение на padding относится к ширине самого .responsive-container.

<div class="responsive-container">
  <div class="dummy"></div>
</div>

.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

Демо № 1.
Демо № 2 (с использованием :after псевдоэлемента)

Добавление содержимого

Использование свойства padding-top вызывает огромное пространство в верхней или нижней части содержимого внутри контейнера.

Чтобы исправить это, мы обертываем содержимое элементом-оболочкой, удаляем этот элемент из нормального потока документа, используя абсолютное позиционирование, и, наконец, разверните оболочку (bu, используя свойства top, right, bottom и left), чтобы заполнить все пространство своего родителя, контейнера.

Здесь мы идем:

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Вот Онлайн-демонстрация.

Общие сведения

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>

.img-container {
  text-align:center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

Вот РАБОЧИЙ ДЕМО.

Очевидно, вы могли бы избежать использования псевдо-элемента ::before для совместимости браузеров и создать элемент в качестве первого дочернего элемента .img-container:

<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="">
</div>

.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

ОБНОВЛЕНО ДЕМО.

Использование max-* свойств

Чтобы сохранить изображение внутри окна с меньшей шириной, вы можете установить свойство max-height и max-width на изображение:

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

Вот ОБНОВЛЕНО ДЕМО.

Ответ 2

С flexbox это легко:

FIDDLE

Просто добавьте в контейнер изображений следующее:

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex; /* add */
    justify-content: center; /* add to align horizontal */
    align-items: center; /* add to align vertical */
}

Ответ 3

Используйте этот css, поскольку у вас уже есть разметка для него:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
}

.img-container > img {
  margin-top:-50%;
  margin-left:-50%;  
}

Вот рабочий JsBin: http://jsbin.com/ihilUnI/1/edit

Это решение работает только для квадратных изображений (поскольку процентное значение предельного значения зависит от ширины контейнера, а не от высоты). Для изображений с произвольным размером вы можете сделать следующее:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* add browser-prefixes */
}

Рабочее решение JsBin: http://jsbin.com/ihilUnI/2/edit

Ответ 4

Вы можете центрировать изображение как по горизонтали, так и по вертикали, используя margin: auto и абсолютное позиционирование. Также:

  • Можно выделить дополнительную разметку с помощью псевдоэлементов.
  • Можно отобразить среднюю часть изображений LARGE, используя отрицательные левые, верхние, правые и нижние значения.

.responsive-container {
  margin: 1em auto;
  min-width: 200px;       /* cap container min width */
  max-width: 500px;       /* cap container max width */
  position: relative;     
  overflow: hidden;       /* crop if image is larger than container */
  background-color: #CCC; 
}
.responsive-container:before {
  content: "";            /* using pseudo element for 1:1 ratio */
  display: block;
  padding-top: 100%;
}
.responsive-container img {
  position: absolute;
  top: -999px;            /* use sufficiently large number */
  bottom: -999px;
  left: -999px;
  right: -999px;
  margin: auto;           /* center horizontally and vertically */
}
<p>Note: images are center-cropped on &lt;400px screen width.
  <br>Open full page demo and resize browser.</p>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/400/sports/9/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/200/sports/8/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/400/sports/7/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/200/sports/6/">
</div>

Ответ 5

Попробуйте этот

  .responsive-container{
          display:table;
  }
  .img-container{
          display:table-cell;
          vertical-align: middle;
   }

Ответ 6

Я нашел этот поток в поисках решения, которое:

  • использует 100% заданной ширины изображения.
  • поддерживает соотношение сторон изображения
  • сохраняет изображение по вертикали в середине
  • работает в браузерах, которые не полностью поддерживают flex

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

.container {
  width: 30%;
  float: left;
  border: 1px solid turquoise;
  margin-right: 3px;
  margin-top: 3px;
}

.container:last-of-kind {
  margin-right: 0px;
}

.image-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 70%;
  /* this is the desired aspect ratio */
  width: 100%;
}

.image-container img {
  position: absolute;
  /* the following 3 properties center the image on the vertical axis */
  top: 0;
  bottom: 0;
  margin: auto;
  /* uses image at 100% width (also meaning it horizontally center) */
  width: 100%;
}
<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

Ответ 7

Try

HTML

<div class="responsive-container">
     <div class="img-container">
         <IMG HERE>
     </div>
</div>

CSS

.img-container {
    position: absolute;
    top: 0;
    left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}

Ответ 8

Здесь есть метод, который позволяет центрировать ЛЮБОЙ контент как по вертикали, так и по горизонтали!

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

Контейнер для выхода:

  • должен иметь display: table;

Внутренний контейнер:

  • должен иметь display: table-cell;
  • должен иметь vertical-align: middle;
  • должен иметь text-align: center;

Поле содержимого:

  • должен иметь display: inline-block;

Если вы используете этот метод, просто добавьте свое изображение (вместе с любым другим содержимым, которое вы хотите с ним) в поле содержимого.

Демо:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 12px;
    border : 1px solid #000;
}

img {
   max-width : 120px;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <img src="https://i.stack.imgur.com/mRsBv.png" />
     </div>
   </div>
</div>

Ответ 9

html code

<div class="image-container"> <img src=""/> </div>

css code

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

Ответ 10

Сделайте еще один div и добавьте оба 'dummy' и 'img-container' внутри div

Сделайте HTML и CSS, как следует

html , body {height:100%;}
.responsive-container { height:100%; display:table; text-align:center; width:100%;}
.inner-container {display:table-cell; vertical-align:middle;}
<div class="responsive-container">
    <div class="inner-container">
		<div class="dummy">Sample</div>
		<div class="img-container">
			Image tag
		</div>
	</div>	
</div>