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

Question

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

Вот такой подход. Вы оберните изображение в 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> 

Demo