Выровнять элемент img в середине

Question

Мне нужно установить изображение в середине элемента.

Пример моего CSS:

.main { 
    width: 600px; 
    position: fixed; 
    left: 50%; 
    margin: 100px -300px; 
    background-color: green; 
} 
.main .image-holder { 
    width: 100%; 
    display: block; 
} 
.main .image-holder img { 
    margin: 10px auto; 
} 

.main имеет фиксированную ширину, но и то, что размер динамически изменяемая в JQuery.

.image-hodler должно быть чем-то вроде миниатюры. Я установил ширину на 100%, потому что, я никогда не знаю, какой размер будет иметь основной элемент.

img и здесь, что margin установлен как auto не работает.

JSFIDDLE

Answer 1

Просто добавьте «выравнивания текста: центр» на родительской DIV, например, так: http://jsfiddle.net/bj6meje0/1/

.main .image-holder { 
    width: 100%; 
    display: block; 
    text-align: center 
} 

Или вы можете изменить поведение изображения для отображения в виде блока, в HTML изображение это как 'характер', так что вы можете сделать:

.main .image-holder img { 
    display: block; 
    margin: 10px auto; 
} 

Fiddle: http://jsfiddle.net/bj6meje0/2/

Разница? Со вторым aproch вы сможете изменить свойство «text-align» для div, иначе текст будет отображаться по центру, так как изображение