Как вы легко центрируете изображение в DIV?

Question

<div style="width:200px;height:200px;overflow:hidden;">
    <img src=".." this is a 300x500 image. > 
</div>

Как сделать так, чтобы получилось изображение размером 200x200 (DIV покрывает остальную часть изображения), но изображение отцентрировано?

Какой самый простой способ сделать это?Какой-нибудь плагин JQuery?Что бы вы сделали?

Редактировать: Я бы хотел, чтобы он выровнялся по вертикали и горизонтали .

Answer 1

Более простое решение: вместо этого установите background-image на <div> (position = 50% 50%):)

Это может быть достигнутым1009 * через jQuery (хотя это не значит, что это хороший подход - просто говорю):

var $div = $('div'),
    $img = $('img', $div),
    src = $img.attr('src');

$div.css('background', 'url(' + src + ') no-repeat 50% 50%');
$img.remove();

Answer 2

Это похоже на работу:

Вы вычисляете разницу в ширине между контейнером и изображением и смещаете ее на эту величину / 2, оставленную с помощью отрицательного значения margin-left. То есть (300px - 200px) / 2 = 50px

<div style="width:200px;height:200px;overflow:hidden;">
    <img src="test.png" style="margin-left:-50px">
</div>

Answer 3

Если вы используете выравнивание текста по центру, текст также будет выравниваться по центру. чтобы избежать этого, поместите изображение в div / span, установите ширину div / span и используйте поле: 0 auto;

 <div style="width:50px; margin: 0 auto;"> <img src="test.png"></div>

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

Answer 4

это должно сработать, попробуйте

div.img{
text-align:center
}

Answer 5

Вот чистое решение JS: http://jsfiddle.net/steve/Ljgm8/ для любого размера div, любого размера изображения, любого браузера, без контейнеров, без дополнительных библиотек.

(Бонус в Firefox - стиль opacity позволяет увидеть, что нижележащий дочерний элемент правильно отцентрирован.)