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

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

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

200

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

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

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

— Keltex
источник

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

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