позиционирование изображения с использованием CSS

Question

Мне действительно нужно разместить изображение где-нибудь на странице (например, 100 пикселей с левой стороны), но я хочу контролировать, где будет находиться центр изображения когда я использую left: 100px; изображение расположено в 100px от его левого края, а не от его центра ...

Есть ли способ, которым я могу выбрать, где будет центр изображения, а не левый / правый край?

Answer 1

Вот подход. Вы оборачиваете изображение в div, а затем помещаете div в нужное вам место, перемещаете его влево, чтобы оно свернулось, чтобы соответствовать его содержимому. Тогда margin-left: -50% само изображение ...

  <div style="position: relative; left: 300px; border: 1px solid red; float: left">
      <img src="#" style="position: relative; margin-left: -50%"/>
  </div>

Демо

Answer 2

[Я предполагаю, что ширина изображения заранее неизвестна, иначе решение будет очевидным]

Полагаю, ваш лучший вариант - поместить его в элемент с фиксированной шириной и центрировать его внутри. Конечно, это имеет очевидные недостатки, если ширина изображения не ограничена и может превышать ширину элемента контейнера.

Answer 3

Знаете ли вы ширину изображения или она варьируется?

Если вы знаете ширину, вы можете установить положение и затем убрать отступ. Например, если вы хотите расположить его по центру страницы, вы можете использовать это:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

, если ваше изображение было 100x50px.

Answer 4

Никакие предметы не всегда размещаются в верхнем левом углу. Если вы знаете ширину изображения, это должно быть легко учесть.

Если размер вашего изображения является динамическим, лучше всего выполнить позиционирование такого типа с помощью Javascript.