Почему не margin: auto center Изображение?

<html>
<head>
<title>Test</title>
</head>
<body>
    <div>
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

The div расширяется до 100%, как и должно, но изображение не центрируется. Зачем?

8 82
html css

8 ответов:

потому что ваш образ-это инлайн-блочный элемент. Вы можете изменить его на элемент уровня блока такой:

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

и он будет по центру.

173

вы должны отобразить его как уровень блока;

img {
   display: block;
   width: auto;
   margin: auto;
}
10

добавить style="text-align:center;"

попробовать ниже код 

<html>
<head>
<title>Test</title>
</head>
<body>
    <div style="text-align:center;vertical-align:middle;">
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>
8

Я знаю, что это старый пост, но хотел поделиться, как я решил ту же проблему.

мое изображение наследует float: left от родительского класса. Установив float:none я смог сделать margin: 0 auto и display: block работать правильно. Надеюсь, что это может помочь кому-то в будущем.

1

Я обнаружил, что я должен определить конкретную ширину для объекта, и ничто другое не сделает его центром. Относительная ширина не работает.

1

открыть поставить 

style="width:100% ; margin:0px auto;"

image тег (или) содержание

закрыть div

0
<div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
0

Я нашел... маржа: 0 авто; работает для меня. Но я также видел, что это не работает из-за того, что класс превзошел другую специфику, которая была ... поплавок:слева; так что следите за тем, что вам может понадобиться добавить ... float: нет; это сработало в моем случае, когда я кодировал медиа-запрос.

0