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

98

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

<img src="/img/logo.png" style="margin:0px auto;"/>
css google-chrome margin centering Веб-дизайнер
источник
Тестируя класс стиля, я обнаружил, что это не рабочий параметр : 0 auto; после некоторого тестирования выяснилось, что если имя класса, которое вы добавляете к элементу, имеет то же имя, что и элемент, это не сработает.
LostLight

Ответы:

219

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

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

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

Росс
источник
12
+1 За то, что был прав. Будет отличным ответом, если вы уточните, что требуется для margin:autoцентрирования элемента в потоке. ( display:blockили display:table, position:staticили position:relativeи т. д.)
Phrogz
1
@Phrogz согласился; добавил некоторые пояснения.
Росс
15
Те, кто читают это, могут также найти полезным добавить "float" none, так как любой другой вид float автоматически нарушит вашу маржу.
Code Whisperer
Но все еще не по центру. Только по центру по горизонтали. Я хочу центрировать его по вертикали, но даже если я сделаю 0px autoэто просто, autoэто все равно не сработает.
Аарон Франке
Конечно, нет, автоматические поля - это старый способ центрировать контент. Если вам нужно точное выравнивание, используйте flexbox: display: flex; align-items: center; justify-content: centerи теперь ваш контент центрирован по горизонтали и вертикали. Или переместите это в align-self: center; justify-self: centerсам контент. css-tricks.com/snippets/css/a-guide-to-flexbox
Майк Камерманс «Pomax»
14

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

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

Брендан
источник
1
margin: 0 autoотлично работает с относительно позиционированными элементами, если они являются блочными элементами без поплавка и заданной шириной ...
Ennui
Полагаю, это сарказм. Если вы отредактируете свой ответ так, чтобы он не был неточным, я удалю голос против. Я пишу CSS почти 15 лет и никогда не могу вспомнить, что автоматические поля не работают для горизонтального центрирования относительно позиционированных элементов фиксированной ширины, хотя другие свойства, такие как floatи, displayмогут изменить это поведение.
Ennui
14

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

div{
margin: 0px auto;
float: none;
display: table;
}
Sameeuor
источник
1
Это работает, и я не знаю почему. Могли бы вы объяснить?
ThatsJustCheesy
1
Я никогда не использовал это раньше, но теперь он работает для меня.
zkytony
10

В моем случае проблема заключалась в том, что я установил минимальную и максимальную ширину без самой ширины .

Даниэль Ситарц
источник
3
Напомним: элемент должен быть position:static, иметь фиксированный width:набор и быть display:blockэлементом
Joey T
У меня тоже была проблема с шириной - bootstrap автоматически настраивал мой div на использование 100% доступности
Эдмунд Сулзанок
6

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

брюки теджасвини
источник
2

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

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

Андрей
источник
0

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

display: table; 
margin: 0 auto;
Абрам
источник
0

поместите это в тело css: background: # 3D668F; затем добавьте: display: block; маржа: авто; в файл css img.

Гейл
источник
0

Я помню, как однажды я потратил много времени, пытаясь центрировать div, используя margin: 0 auto.

У меня было display: inline-blockна нем, когда я его удалил, div правильно центрировался.

Как заметил Росс, это не работает со встроенными элементами.

тиаголисалвес
источник