Шпаргалка HTML & CSS

Как установить иконку или цифры в центре круга, HTML&CSS

В верстке очень часто нужно установить какие либо элементы внутри других, например, иконки социальных сетей в круге или номера страниц в разделе пагинации. Все это можно сделать только с помощью HTML и CSS.
Здесь мы приведем два способа, как можно реализовать данный элемент верстки.

Первый способ

Логика
Сначала создаем родительский блок нужной ширины и задаем ему относительное позиционирование.
Затем внутри родительского блока создаем дочерний и указываем ему абсолютное позиционирование и центрируем его относительно родительского блока.

Настройка
Родительскому блоку указываем размер шрифта в пикселях, а ширину и высоту в em. Это нужно для того, чтобы при изменении размера шрифта, размер родительского блока увеличивался пропорционально со всех сторон, по ширине и высоте.
Дочернему блоку при необходимости указываем цвет элементов.
Все остальные настройки являются произвольными на ваше усмотрение.

Первый способ

html

<div class="ext-item">
  <a href="#"><i class="inner-item" aria-hidden="true"></i></a> 
</div> 

css

.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.
Затем указываем ему цвет фона и цвет текста, который нам нужен и другие атрибуты, которые будут нужны, чтобы добиться нужного нам внешнего вида данного элемента.
Центрирование элементов происходит за счет выравнивания текста по центру и подбора высоты между строками.

html

<a class="page-numbers" href="#">22</a>

css

.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;
}

Пример:

22
23

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

Еще по теме:

Напишите что нибудь:

Ваш адрес email не будет опубликован. Обязательные поля помечены *