Вы можете создать адаптивную сетку квадратов с содержимым по вертикали и по центру только с помощью CSS . Я объясню, как в пошаговом процессе, но сначала приведем 2 демонстрации того, чего вы можете достичь:
Теперь давайте посмотрим, как сделать эти модные адаптивные квадраты!
1. Создание адаптивных квадратов:
Хитрость в том, что элементы должны быть квадратными (или с любым другим соотношением сторон) - использовать процент padding-bottom.
Примечание: вы можете использовать верхнее заполнение или верхнее / нижнее поле, но фон элемента не будет отображаться.
Поскольку верхний отступ рассчитывается в соответствии с шириной родительского элемента ( см. MDN для справки ), высота элемента будет меняться в зависимости от его ширины. Теперь вы можете сохранить его соотношение сторон в соответствии с его шириной.
На данный момент вы можете код:
HTML :
<div></div>
CSS
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
Вот простой пример компоновки сетки 3 * 3 квадратов с использованием приведенного выше кода.
С помощью этой техники вы можете сделать любое другое соотношение сторон, вот таблица, в которой приведены значения нижнего отступа в соответствии с соотношением сторон и шириной 30%.
Aspect ratio | padding-bottom | for 30% width
------------------------------------------------
1:1 | = width | 30%
1:2 | width x 2 | 60%
2:1 | width x 0.5 | 15%
4:3 | width x 0.75 | 22.5%
16:9 | width x 0.5625 | 16.875%
2. Добавление контента внутри квадратов
Поскольку вы не можете добавлять контент непосредственно внутри квадратов (это увеличило бы их высоту и квадраты больше не были бы квадратами), вам необходимо создать дочерние элементы (для этого примера я использую div) внутри них position: absolute;и поместить контент внутри них. , Это позволит вывести содержимое из потока и сохранить размер квадрата.
Не забудьте добавить position:relative;родительские элементы div, чтобы абсолютные дочерние элементы располагались / измерялись относительно своих родителей.
Давайте добавим некоторый контент в нашу сетку квадратов 3х3:
HTML :
<div class="square">
<div class="content">
.. CONTENT HERE ..
</div>
</div>
... and so on 9 times for 9 squares ...
CSS :
.square {
float:left;
position: relative;
width: 30%;
padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
РЕЗУЛЬТАТ <- с некоторым форматированием, чтобы сделать его красивым!
3. Центрирование контента
Горизонтально :
Это довольно просто, вам просто нужно добавить text-align:centerв .content.
РЕЗУЛЬТАТ
Вертикальное выравнивание
Это становится серьезным! Хитрость заключается в использовании
display:table;
/* and */
display:table-cell;
vertical-align:middle;
но мы не можем использовать display:table;на .squareили .contentдивы , потому что это противоречит position:absolute;так что нам нужно создать два ребенка внутри .contentдивы. Наш код будет обновлен следующим образом:
HTML :
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell">
... CONTENT HERE ...
</div>
</div>
</div>
</div>
... and so on 9 times for 9 squares ...
CSS:
.square {
float:left;
position: relative;
width: 30%;
padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
}
Теперь мы закончили, и мы можем посмотреть на результат здесь:
редактируемая скрипка здесь
