Как сделать круг на html

Привет! Сегодня я покажу как сделать круг на html, и как сделать круг с текстом по центру. Ну или с иконкой в центре круга.
Начнем с квадратного блока.


<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Round</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div class="round">Text</div>
</body>
</html>

Только сделаем его квадратным сначала и дадим ему цвет и рамку в 1 пиксел.


.round {
	width: 300px;
	height: 300px;
	background: #e3e3e3;
	border: 1px solid #939393;
}

Получился вот такой квадрат с текстом:

квадрат html

Сейчас нам нужно выровнять текст по центру квадрата. Есть куча методов как это сделать, но правильным в нашем случае будет такой:

  • Делаем высоту строчки равную высоте блока (так мы выровняем его по вертикали)
  • Юзаем тег выравнивающий по горизонтали

Ну и для более эстетического вида увеличим шрифт и дадим ему цвет.


.round {
	width: 300px;
	height: 300px;
	background: #e3e3e3;
	border: 1px solid #939393;
	line-height: 300px;
	text-align: center;
	font-size: 50px;
	color: blue;
}

Ну и получилось вот такое:

как выровнять текст по центру квадрата

Теперь мы знаем как выровнять текст по центру квадрата при помощи html. Осталось сделать с квадрата – круг.

Для лучшего понимания давайте сначала легонько закруглим углы.


.round {
	width: 300px;
	height: 300px;
	background: #e3e3e3;
	border: 1px solid #939393;
	line-height: 300px;
	text-align: center;
	font-size: 50px;
	color: blue;
	border-radius: 30px;
}

Вот квадрат с закругленными углами:

квадрат с закругленными углами

А вот квадрат с очень закругленными углами (круг):


border-radius: 150px;

круг в html

Если интересно какой border-radius нужно дать квадрату для того чтобы он стал кругом, то это ровно половина его одной стороны, а в нашем случае 150 пикселей. Если вы дадите ему больший border-radius чем половина стороны, то ничего не изменится. Но если дадите меньший то на будет видно что это не круг.
Если высота квадрата не делится на 2, то сделайте border-radius большим на пол пикселя, чем половина стороны.
Например сторона 35 пикселей. Половина это 17,5 пикселей. Для того чтобы он стал кругом, нужно дать border-radius 18 пикселей.
Если нужно выровнять иконку по центру круга, делайте то же самое что и с текстом.

Вставили картинку в html код, сделали высоту строчки равную высоте блока, и использовали горизонтальное выравнивание.

Думаю что на этом урок закончен :) Есть вопросы? Задавай в комменты)

Pin It

2 thoughts on “Как сделать круг на html

Оставить комментарий

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

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>