Вітання! Сьогодні я покажу як зробити коло на html, і як зробити коло з текстом по центру. Ну або з іконкою в центрі кола.
Почнемо з квадратного блоку.
Тільки зробимо його квадратним спочатку і дамо йому колір і рамку в 1 піксель.
Вийшов ось такий квадрат з текстом:
Зараз нам потрібно вирівняти текст по центру квадрата. Є купа методів як це зробити, але правильним в нашому випадку буде такою:
- Робимо висоту рядки рівну висоті блоку (так ми вирівняємо його по вертикалі)
- Юзаем тег вирівнюючий по горизонталі
Ну і для більш естетичного вигляду збільшимо шрифт і дамо йому колір.
Ну і вийшло ось таке:
Тепер ми знаємо як вирівняти текст по центру квадрата за допомогою html. Залишилося зробити з квадрата - коло.
Для кращого розуміння давайте спочатку легенько закруглити кути.
Ось квадрат із закругленими кутами:
А ось квадрат з дуже закругленими кутами (коло):
Якщо цікаво який border-radius потрібно дати квадрату для того щоб він став кругом, то це рівно половина його одного боку, а в нашому випадку 150 пікселів. Якщо ви дасте йому більший border-radius ніж половина боку, то нічого не зміниться. Але якщо дасте менший то на буде видно що це не коло.
Якщо висота квадрата не ділиться на 2, то зробіть border-radius великим на підлогу пікселя, ніж половина боку.
Наприклад сторона 35 пікселів. Половина це 17,5 пікселів. Для того щоб він став колом, потрібно дати border-radius 18 пікселів.
Якщо потрібно вирівняти іконку по центру кола, робіть те ж саме що і з текстом.
Вставили картинку в html код, зробили висоту рядки рівну висоті блоку, і використовували горизонтальне вирівнювання.