Как изменить расположение картинки в CSS

Для изменения расположения картинки в CSS можно использовать несколько различных методов, в зависимости от того, как точно вы хотите расположить картинку и на каком элементе вы хотите ее изменить.

1. С помощью свойства float

Вы можете использовать свойство float для расположения картинки слева или справа от содержимого другого элемента на странице. Пример:

img {
  float: left; /* расположение картинки слева */
  margin-right: 10px; /* добавление отступа между картинкой и содержимым */
}

2. С помощью свойства position

Вы можете использовать свойство position для абсолютного или относительного позиционирования картинки на странице. Пример:

img {
  position: absolute; /* абсолютное позиционирование */
  top: 50%; /* задаем позицию по вертикали на 50% от верхнего края родительского элемента */
  left: 50%; /* задаем позицию по горизонтали на 50% от левого края родительского элемента */
  transform: translate(-50%, -50%); /* центрирование относительно точки 50% на обеих осях */
}

3. С помощью свойства background-image

Если вы хотите использовать картинку как фон для элемента, вы можете использовать свойство background-image. Пример:

div {
  background-image: url("image.jpg"); /* указываем путь к картинке */
  background-repeat: no-repeat; /* повторение фона выключено */
  background-position: center; /* расположение фона по центру */
}

4. С помощью свойства display и margin

Если вы хотите отобразить картинку рядом с текстом, вы можете использовать свойство display в сочетании со свойством margin. Пример:

div {
  display: inline-block; /* задаем блочно-строчный тип отображения */
  margin-right: 10px; /* отступ справа от текста */
}

Это лишь несколько способов изменения расположения картинки в CSS. Выберите понравившийся вам метод и настройте его, соответствующим образом.