Поле CSS: 0 Авто; не работает с тегом ‹img›

Моя разметка проста, и я использую встроенный CSS. Моя цель — центрировать изображение, используя margin: 0 auto; в HTML-атрибуте style. Вот код, который я пробовал:

<div style="width: 100%;">
<img src="http://dummyimage.com/200x300/000000/fff" style="margin: 0 auto;"/>
</div>

Почему CSS не центрирует мой <img>?


html css margin
person Drazzah    schedule 21.10.2014    source источник

Ответы (4)


arrow_upward
27
arrow_downward

Вы должны использовать display: block, чтобы margin: 0px auto имело какой-либо эффект.

<div style="width: 100%;">
<img src="http://placekitten.com/g/200/300" style="display: block; margin: 0px auto;">
</div>

person Fahad Hasan    schedule 21.10.2014

arrow_upward
2
arrow_downward

Синтаксис вашего атрибута стиля неверен в div. Кроме того, измените стиль тега img следующим образом:

<div style="width:100%">
<img src="https://4c206b86fe5a0219d31bb1ae55c8bbdc3f028879-www.googledrive.com/host/0BzEiAml5ygAeU3N6QTRUUW53Vjg/" width="50%" height="auto" style="margin:0 auto; display:block">
</div>
person Talmid    schedule 21.10.2014

arrow_upward
1
arrow_downward

Img является встроенным элементом, поэтому width: 0 auto не будет работать, если вы не установите display: block. Или вы можете центрировать его с помощью text-align: center, что немного странно, но должно работать аналогично.

Кроме того, вам следует подумать о прекращении использования встроенных стилей. Это делает html-разметку труднее для чтения, сложнее в обслуживании и т. д. Стили принадлежат отдельным файлам css, и вы должны стараться избегать встроенных стилей, когда это возможно. (и атрибуты html, такие как ширина, высота и т. д. ТАК ЖЕ!)

Ну и еще margin-left:0 auto; margin-right:0 auto; не совсем годится. Правильная форма будет либо

margin: 0 auto;

or 

margin-left: auto;
margin-right: auto;
person walther    schedule 21.10.2014
comment
width: 0 auto - вы имели в виду margin: 0 auto? - person nCardot; 21.05.2021

arrow_upward
0
arrow_downward 

text-align: center;

В любом случае теги изображений не соответствуют w3c.

display: block;
margin: 0 auto;

Должно быть!

Принимая во внимание этот пост

person fubbe    schedule 21.10.2014
comment
text-align: center центрирует изображение только в том случае, если оно применяется к родителю изображения. - person nCardot; 21.05.2021