Вот методика выравнивания встроенных элементов внутри родителя , по горизонтали и вертикали одновременно:
Вертикальное выравнивание
1) В этом подходе мы создаем inline-block(псевдо) элемент в качестве первого (или последнего) дочернего элемента родителя и устанавливаем его heightсвойство, 100%чтобы принимать всю высоту его родителя .
2) Кроме того, добавление vertical-align: middleсохраняет встроенные элементы (-block) в середине строки. Итак, мы добавляем эту декларацию CSS к первому дочернему элементу и нашему элементу ( изображению ).
3) Наконец, чтобы удалить пробел между символами inline (-block) , мы можем установить нулевой размер шрифта родительского элемента font-size: 0;.
Примечание: я использовал технику замены изображения Николаса Галлахера в следующем.
Каковы преимущества?
- Контейнер ( родитель ) может иметь динамические размеры.
Нет необходимости явно указывать размеры элемента изображения.
Мы можем легко использовать этот подход для выравнивания <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 */
}
Выход
Отзывчивый Контейнер
Этот раздел не собирается отвечать на вопрос, так как ОП уже знает, как создать адаптивный контейнер. Однако я объясню, как это работает.
Чтобы высота элемента контейнера изменялась в зависимости от его ширины (с учетом соотношения сторон), мы могли бы использовать процентное значение для paddingсвойства top / bottom .
Процентное значение на верхней / нижней прокладкой или краями является относительно ширины содержащего блока.
Например:
.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псевдоэлементу для достижения того же результата. Но к сведению , что в этом случае процентное значение на 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свойства приводит к появлению огромного пространства в верхней или нижней части содержимого внутри контейнера .
Для того , чтобы исправить это, мы должны обернуть содержимое с помощью элемента - оболочки, удалите этот элемент из документа нормального потока, используя абсолютное позиционирование , и , наконец , развернуть обертку (бушель , используя 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 */
}
Вот ОБНОВЛЕНИЕ ДЕМО .