В верстке очень часто нужно установить какие либо элементы внутри других, например, иконки социальных сетей в круге или номера страниц в разделе пагинации. Все это можно сделать только с помощью HTML и CSS.
Здесь мы приведем два способа, как можно реализовать данный элемент верстки.
Первый способ
Логика
Сначала создаем родительский блок нужной ширины и задаем ему относительное позиционирование.
Затем внутри родительского блока создаем дочерний и указываем ему абсолютное позиционирование и центрируем его относительно родительского блока.
Настройка
Родительскому блоку указываем размер шрифта в пикселях, а ширину и высоту в em. Это нужно для того, чтобы при изменении размера шрифта, размер родительского блока увеличивался пропорционально со всех сторон, по ширине и высоте.
Дочернему блоку при необходимости указываем цвет элементов.
Все остальные настройки являются произвольными на ваше усмотрение.
Первый способ
<div class="ext-item">
<a href="#"><i class="inner-item" aria-hidden="true"></i></a>
</div>
.ext-item {
position: relative;
width: 2.8em;
height: 2.8em;
font-size: 22px;
border: 2px solid #6d8600;
border-radius: 50%;
}
.inner-item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #e88501;
}
Пример:
Второй способ
Кроме иконок внутри круга можно добавить цифры, например для меню пагинации. Сделать это можно и первым способом, все будет отлично работать. Но так как все шрифты одного набора имеют одинаковые пропорции, то можно воспользоваться и другим вариантом.
Логика
Создаем ссылку с классом, например page-numbers и этому классу назначаем нужные нам атрибуты, чтобы все выглядело красиво и ровно.
Настройка
Также, как и в первом случае указываем классу размер шрифта в пикселях, а ширину и высоту в em.
Затем указываем ему цвет фона и цвет текста, который нам нужен и другие атрибуты, которые будут нужны, чтобы добиться нужного нам внешнего вида данного элемента.
Центрирование элементов происходит за счет выравнивания текста по центру и подбора высоты между строками.
<a class="page-numbers" href="#">22</a>
.page-numbers {
display: inline-block;
width: 2.8em;
height: 2.8em;
margin-left: .3em;
font-size: 22px;
line-height: 2.7;
text-align: center;
color: #e88501;
border: 2px solid #6d8600;
border-radius: 50%;
transition: .3s;
}
Пример:
Как видите выровнять один элемент внутри другого достаточно просто, нужно лишь указать нужные атрибуты этим элементам. Используйте эти варианты в своих работах и создавайте качественную верстку.
Удачи!
Kwork