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

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

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

html css Джо Филлипс
источник

Ответы:

10

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

img {
   display: block;
   width: auto;
   margin: auto;
}
TheDeadMedic
источник
Почему он выравнивается только по горизонтали, а не по вертикали?
Мистер Белл
4
Вертикальное выравнивание не так просто, как вы могли надеяться. Все зависит
TheDeadMedic
8

Добавить 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>
Праная Рана
источник
Я не думаю, что ваш ответ неверен, но в вашем нет объяснения типа отображения.
Джо Филлипс
Хотя ваш ответ можно рассматривать как альтернативное решение, я бы не советовал его. Причина в том, что если вы добавите что-нибудь еще внутри div, например, заголовок, он выровняется по центру с изображением. Чтобы выровнять заголовок по левому краю, вам придется написать для него больше стилей. Вам придется продолжать делать это для всего, что вы добавляете в div. Поэтому display: block;настоятельно рекомендуется добавить к изображению.
Devner 08
2

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

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

Райан Холлингсворт
источник
1

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

Женщина-кошка
источник
2
Это не дает ответа на вопрос. Чтобы критиковать или запрашивать разъяснения у автора, оставьте комментарий под его сообщением - вы всегда можете комментировать свои собственные сообщения, и когда у вас будет достаточная репутация, вы сможете комментировать любое сообщение .
Кристиан Илиев
Моя точка зрения заключалась в том, что, хотя несколько человек дали ответы, которые работают, они работают, только если код включает конкретное определение ширины объекта. Пример: <img [... etc., Etc., ...] style = "display: block; margin: auto; width: 200px" /> будет работать, но не используйте относительный размер, например "width. : 50% ». Конечно, если вы используете «width: 100%», то центрирование не проблема, потому что тогда нет поля слева или справа от объекта.
Catwoman
0

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

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: left; так что следите за тем, что вам может понадобиться добавить ... float: none; это сработало в моем случае, когда я кодировал медиа-запрос.

Дино
источник