Изображения отображаются не по центру при масштабе 100 %, но центрируются при увеличении. ⇐ Html

[Anonymous]

У меня возникла странная проблема с центрированием изображения внутри элемента div: при масштабировании 100% (по умолчанию) изображение выглядит смещенным от центра, хотя при достаточно большом увеличении оно кажется центрированным. Вот как это выглядит.


Контейнер при масштабе 100 %


Контейнер при масштабе 500 %
Я использую здесь черный кружок, чтобы его было хорошо видно, но на самом деле мне нужно это пространство, чтобы можно было хранить различные изображения. Когда я распечатываю их в строках и столбцах, некоторые из них смещены от центра по вертикали, некоторые — по горизонтали, а некоторые — и то, и другое. Но когда я увеличиваю масштаб, все всегда идеально центрируется.
Я пробовал разные методы центрирования (сетка, использование полей и т. д.) и загружал в разных размерах, но ничего не получалось. Это происходит во всех браузерах, которые я пробовал, так что, похоже, проблема в самом коде. Я знаю, что это может показаться незначительной проблемой, но это очень важно для проекта, над которым я работаю. Любая помощь будет принята с благодарностью. Вот фрагмент.

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

.page {
width: 400px;
display: flex;

flex-wrap: wrap;
}

.container {
height: 30px;
width: fit-content;
border-radius: 30px;

margin: 2.5px;

display: flex;
align-items: center;

user-select: none;

background-color: black;

}

.icon_background {
height: 26px;
width: 26px;
border-radius: 30px;

margin: 0 5px 0 3px;

background-color: white;

display: flex;
justify-content: center;
align-items: center;
}

.icon {
height: 20px;
width: 20px;
}

.text {
margin-right: 15px;
margin-top: 1px;
font-size: 18px;
color: white;
}








[img]https://i.imgur.com/S6P9JXu.png[/img]

Example



[img]https://i.imgur.com/S6P9JXu.png[/img]

Example



[img]https://i.imgur.com/S6P9JXu.png[/img]

Example



[img]https://i.imgur.com/S6P9JXu.png[/img]

Example



[img]https://i.imgur.com/S6P9JXu.png[/img]

Example



[img]https://i.imgur.com/S6P9JXu.png[/img]

Example

Подробнее здесь: https://stackoverflow.com/questions/798 ... -zoomed-in