Почему не маржировать: автоцентрировать изображение?

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

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

Ответ 1

Поскольку ваше изображение является элементом встроенного блока. Вы можете изменить его на элемент уровня блока следующим образом:

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

и он будет центрирован.

Ответ 2

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

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

Ответ 3

Добавить 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>

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

Ответ 7

откройте div, затем поместите

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

image тег (или)

закрыть div

Ответ 8

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