Как можно центрировать "блок", который будет содержать изображение с position: absolute?
Задача: накладывать друг на друга несколько изображений в зависимости от выбранных пользователем селектов и прочего, и размещать их в центре блока. При этом центрирование "работает" только при открытии на ноуте; на мобильном (портрет/альбом) и на планшете изображения смещены влево... Добиться центрирования не смог. При этом если убрать img-wrap-yur и поставить одно изображение, то все отлично центрируется. Возможно ли вообще центрирование, если будет применяться класс img-wrap-yur (и img-wrap-yur img с absolute)?
Реализовано так:
position: relative;
}
.img-wrap-yur img {
position: absolute;
}
<div class="justify-content-center">
<img class="" id='selectedBaseWindow' class="yurBase" style="z-index: 1" alt="">
<img id='selectedWindow' class="yurBase" style="z-index: 2" alt="">
<img id='selectedFurniture' class="yurBase" style="z-index: 3" alt=""></div>
Ответы (1 шт):
Ну почему вы решили, что position: absolute сделает вам изображение по центру? С ноутом вам просто повезло. Да, вы задали изображениям абсолютное позиционирование, но не задали, как конкретно их позиционировать. Для этого нужно использовать свойства left: 50% и top: 50%. В этом случае позиция левого верхнего угла изображения будет по центру родительского блока. Но чтобы центр изображения был по центру родительского блока нужно еще сдвинуть изображение на половину ширины влево и на половину высоты вверх. Для этого можно использовать margin-left: -50%; margin-top: -50%, но лучше transform: translate(-50%, -50%).