@Let_peace

Почему центрированный элемент не становится в центр?

HTML:

<label class="label">
	<span class="label-span label-span-selected"></span>
</label>
<label class="label">
	<span class="label-span"></span>
</label>
<label class="label">
	<span class="label-span"></span>
</label>


CSS:

.label{
	margin: 0 3px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	padding: 0;
	background-color: #fff;
	border-radius: 50%;
}
.label-span{
	display: block;
	width: 16px;
	height: 16px;
	background-color: #777;
	border-radius: 50%;
}
.label-span-selected{
	background-color: #333;
}


Когда увеличиваю масштаб страницы (CRTL+), в браузере label-span становится криво (при разных масштабах): 100%

5f46a409c6de4912698426.png
125%

5f46a4186b426144706555.png
175%

5f46a4247e213355119508.png

Выглядит не так, как хотелось бы, но вроде я всё правильно написал. Как избежать этой ситуации?
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
При масштабе 175% родитель становится 35px, дочерний 28px.
Как бы вы хотели, чтобы он нарисовался ровно по центру родителя?

Можно попробовать заменить центрирование флексом на абсолют с трансформом.

Но лучше избавиться от span'a. Зачем 2 тега, если всё это решается одним тегом. И просто border
https://jsfiddle.net/uqfpbx1w/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@lanzor
Как уже писал чел свыше, нет смысла плодить код.
HTML:
<label class="label">
	<span class="label-span label-span-selected"></span>
	<span class="label-span"></span>
	<span class="label-span"></span>
</label>


CSS:
.label{
	display: inline-flex;
	box-sizing: border-box;
	padding: 3px;
	background-color: #000;
}
.label-span{
	display: inline-block;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 0 2px;
	border-radius: 50%;
	border: 2px solid #fff;
	background-color: #777;
}
.label-span-selected{
	background-color: #333;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы