Позиция картинки

132
08 января 2020, 19:10

Как зафиксировать картинку по центру, а то при изменения размера окна браузера, картинка смещается

Вот она смещается

Как сделать так, чтобы картинка не изменяла свое расположение по вертикали, использовал:

position:relative;
bottom: 100px
Answer 1

Вот так должно сработать, двигаем картинку трансформом на половину высоты вверх и на половину ширины влево, и выставляем top: 50%; и left: 50%;, при этом у элемента должен быть задано абсолютное позиционирование:

.center { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
}
<img class="center" src="https://i.stack.imgur.com/EK1my.png?s=128">

Еще вариант с calc(50% - XXXpx)

.center { 
  position: absolute; 
  top: calc(50% - 50px); 
  left: calc(50% - 50px); 
}
<img class="center" src="https://i.stack.imgur.com/EK1my.png?s=128">

И наверное самый лаконичный способ, только при помощи трансформов:

.center { 
  transform: translate(50vw, 50vh) translate(-50%, -50%); 
}
<img class="center" src="https://i.stack.imgur.com/EK1my.png?s=128">

READ ALSO
v-bind:style вынести в computed VUE JS
javascript

v-bind:style вынести в computed VUE JS

День добрыйС помощью :style забиндила стили внутри Html-кода, теперь понимаю, что логичнее было бы такой кусок кода поместить в computed внутри скрипта

 161
Как переписать код с jquery на vanilla javascript
javascript

Как переписать код с jquery на vanilla javascript

есть такой код

 176
Тупит сборщик мусора
javascript

Тупит сборщик мусора

Чтобы было меньше вопросов, опишу краткую суть - Занимаюсь самописным модулем, он делает следующее: Получает небольшие данные буфером -> индексирует...

 136
как можно переписать этот метод на async/await
javascript

как можно переписать этот метод на async/await

как можно переписать эту функцию без использования new Promise, используя только async/awaitМожет есть какие то примеры?

 152