Как отцентировать текст внутри div?

.createButton {
	height: 3rem;
	width: 3rem;
	border-radius: 50%;
	color: #FFF;
	background: var(--green-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	font-weight: 600;
}


<div class="createButton">+</div>
Почему-то плюс не совсем по центру (по вертикали), конечно можно править всякими отрицательными маргинами, но хотелось бы без костылей
  • Вопрос задан
  • 112 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Шрифтовой плюс всегда будет криво стоять по вертикали. как и минус.
Сделайте svg иконку для кнопки.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
grantur5707
@grantur5707
Full Stack Web Developer
Проблема может быть связана с особенностями шрифта, который используется для плюса. Попробуйте добавить свойство line-height, чтобы оно совпадало с высотой элемента:
.createButton {
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    color: #FFF;
    background: var(--green-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
}
Ответ написан
Ваш ответ на вопрос

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

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