Чому не розміщується поле: автоматичний центр зображення?

93

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

divРозширюється до 100% , як і повинно бути , але зображення не центрувати себе. Чому?

html css

— Джо Філіпс
джерело

197

Тому що ваше зображення є вбудованим блоком . Ви можете змінити його на елемент рівня блоку таким чином:

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

і це буде зосереджено.

— Keltex
джерело

10

Вам потрібно відобразити його як рівень блоку;

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

— TheDeadMedic
джерело

Чому він розташовується лише горизонтально, а не вертикально?

— Містер Белл

4

Вертикальне вирівнювання не настільки прямо, як ви могли сподіватися. Все зводиться до специфікації CSS - перегляньте цю красиво стисну

— 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

2

я знаю, що це стара публікація, але хотів поділитися, як я вирішив ту саму проблему.

Моє зображення успадковувало float: залишено від батьківського класу. Встановивши float: none Я зміг зробити margin: 0 auto і display: block працювати належним чином. Сподіваюся, це може допомогти комусь у майбутньому.

— Райан Холлінгсворт
джерело

1

Я виявив, що я повинен визначити конкретну ширину для об’єкта, інакше ніщо інше не зробить його центром. Відносна ширина не працює.

— Жінка-кішка
джерело

2

Це не дає відповіді на запитання. Щоб критикувати або вимагати роз’яснень від автора, залиште коментар під його публікацією - ви завжди можете коментувати власні публікації, і коли у вас буде достатня репутація, ви зможете коментувати будь-яку публікацію .

— Крістіян Ілієв

Моя думка полягала в тому, що хоча кілька людей дали відповіді, які працюють, вони працюють лише в тому випадку, якщо код містить конкретне визначення ширини об’єкта. Наприклад: <img [... і т.д., і т.д., ...] style = "display: block; margin: auto; width: 200px" /> буде працювати, але не використовуйте відносний розмір, наприклад "width : 50% ". Звичайно, якщо ви використовуєте "ширина: 100%", то центрування не є проблемою, оскільки тоді немає ліворуч або праворуч від об'єкта.

— Жінка-кішка

0

відкрити divпотім поставити

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

image тег (або) вмісту

закрити див

— Хамд Іслам
джерело

0

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

— Саліл
джерело

0

Я знайшов ... margin: 0 auto; працює для мене. Але я також бачив, що НЕ працює через те, що клас переповнений іншою специфікою, яка ... плавала: ліворуч; так що слідкуйте за тим, що вам може знадобитися додати ... float: none; це спрацювало у моєму випадку, коли я кодував медіа-запит.

— Діно
джерело