Автоматические поля не центрируют изображение на странице

Question

В в этом примере изображение не отцентрировано. Зачем? Мой браузер - Google Chrome v10 на Windows 7, а не IE.

<img src="/img/logo.png" style="margin:0px auto;"/>

Answer 1

добавь display:block; и все заработает. Изображения встроены по умолчанию

Для пояснения, ширина по умолчанию для элемента block равна auto, что, конечно, заполняет всю доступную ширину содержащего элемента.

Устанавливая поле на auto, браузер назначает половину оставшегося пространства для margin-left, а другую половину для margin-right.

Answer 2

При некоторых обстоятельствах (таких как более ранние версии IE, Gecko, Webkit) и наследования элементы с position:relative; будут препятствовать работе margin:0 auto;, даже если top, right, bottom и left не установлены.

Установка элемента на position:static; (по умолчанию) может исправить его в этих условиях.Как правило, элементы уровня блока с указанной шириной будут соответствовать margin:0 auto; с использованием позиционирования relative или static.

Answer 3

Вы можете центрировать авто по ширине, используя display:table;

div{
margin: 0px auto;
float: none;
display: table;
}

Answer 4

В моем случае проблема была в том, что я установил min и max width без width .

Answer 5

Всякий раз, когда мы не добавляем ширину и не добавляем margin:auto, я думаю, это не будет работать. Это из моего опыта. Ширина дает представление о том, где именно необходимо обеспечить равные поля.

Answer 6

есть альтернатива margin-left:auto; margin-right: auto; или margin:0 auto; для тех, которые используют position:absolute;, вот как:Вы устанавливаете левое положение элемента на 50% (left:50%;), но это не будет правильно центрировать его, для правильного центрирования элемента вам нужно дать ему поле с минус половиной его ширины, что будетидеально отцентрируйте свой элемент

вот пример: http://jsfiddle.net/35ERq/3/

Answer 7

поместите это в css: background: # 3D668F;затем добавьте: display: block;наценка: авто;к img's css.

Answer 8

Для кнопки начальной загрузки:

display: table; 
margin: 0 auto;