Содержимое значка начальной загрузки находится не точно посередине. ⇐ CSS

[Гость]

Это кнопка настроек моего сайта.

Он может быть виден, но он слегка наклонен вправо вверх.
Это не является ошибкой вертикального выравнивания по центру. Я хочу, чтобы этот заполнитель значка шестеренки начальной загрузки фактически находился точно посередине элемента div.
Вот мои html и css :

Код: Выделить всё

[/i]

Код: Выделить всё

.btn-setting {
width: 28px;
height: 28px;
border-radius: 50%;
position: relative;
background-color: white;
cursor: pointer;
transition: background-color .2s ease;
}
.btn-setting > i:before {
font-size: 18px;
color: #959FFF;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.btn-setting:hover {
color: white;
background-color: transparent;
border: 1px solid white;
}
.btn-setting:hover > i::before {
color: white;
}

As you can see in the css, I've currently tried using display:

Код: Выделить всё

flex

,

Код: Выделить всё

align-items-center

,

Код: Выделить всё

justify-content-center

to center align it.
It appears to be centered at first glance, but as mentioned before, it is slightly shifted to the top right.
Not only is it hard to see, but it's not that important. But now that I've been watching it for months, it's starting to get on my nerves.
Is there a good solution?


Источник: https://stackoverflow.com/questions/781 ... the-middle