Как сделать центр изображения в div?

Question

Мой HTML-код выглядит следующим образом:

<div class="ctn"> 
    <img src="some-img.jpg"/> 
</div> 

ctn должен быть фиксированный размер, скажем, 150 * 150.

Но размер ГИМ может больше или меньше: 200 * 50, 50 * 200, 50 * 50 и т.д.

Как мне сделать подгонку изображения в центре div? Доля изображения не должна изменяться.

==== UPDATE ==== Да, мне нужны оба hori & вертикальный центр.

Answer 1

Вы можете добавить css, чтобы центрировать изображение как по горизонтали, так и по вертикали:

DIV.ctn { 
    min-height: 150px; 
    min-width: 150px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle } 

...

<div class="ctn"> 
    <img src="some-img.jpg"/> 
</div> 

Edit: подробнее см: http://www.w3.org/Style/Examples/007/center.html

Answer 2

Попробуйте следующее:

text-align: center;  
display: table-cell; 
vertical-align: middle; 

DEMO

Answer 3

набор стиль = "маржа пусть: авто; поле: справа: авто"

также указать ширину к изображению еще не будет работа

Answer 4

EDIT: повторное чтение, вы хотите, размер изображения будет исправлена. div.cnt { margin-left: auto; margin-right: auto; text-align: center; дисплей: табличная ячейка; вертикально-выровненный: средний; min-height: 150px; min-width: 150px; }

Answer 5

Самый простой способ должен быть:

div.cnt { 
    width: 150px; 
    height: 150px; 
} 

<div class="ctn" style="background: url('some-img.jpg') 50% 50% no-repeat;"> 

</div> 

Answer 6

я думаю, что это ваш ответ

.container img { width: 100%;} 
.container {display: table-cell;vertical-align: middle} 

http://jsfiddle.net/RUQAM/1/

он подходит, в центре из ваших фиксированный размер div, а пропорции изображения: не изменен.

Answer 7

Если ctn должен быть фиксированным размером (например: 150x150) и изображение должно быть proporcional и не больше, чем тот DIV, это решение:

CSS

.ctn{ 
    background-color:#F00; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
    overflow:hidden; 
    height:150px; 
    width:150px; 
} 
.ctn div{ 
    display:table-cell; 
    vertical-align: middle; 
    text-align:center; 
} 
.ctn div img{ 
    width:150px; 
} 

HTML

<div class="ctn"> 
<div> 
    <img src="url" /> 
</div> 
</div> 

Этот путь будет центрирования DIV в середине экран и изображение не будут больше 150x150, но он будет поддерживать его пропорциональность.