Автоматичні поля не фокусують зображення на сторінці

97

У цьому прикладі зображення не по центру. Чому? Мій браузер - Google Chrome v10 на Windows 7, а не IE.

<img src="/img/logo.png" style="margin:0px auto;"/>

— Веб-дизайнер
джерело

Випробовуючи клас стилів, я виявив, що це не працює націнка: 0 авто; після деяких тестувань з'ясувалося, що якщо ім'я класу, який ви додаєте до елемента, має те саме ім'я, що і елемент, це не працюватиме.

— LostLight

218

додайте, display:block;і воно працюватиме. Зображення за замовчуванням є вбудованими

Для уточнення ширина за замовчуванням для blockелемента є auto, що, звичайно, заповнює всю наявну ширину елемента, що містить.

Встановивши маржу на auto, браузер призначає половину решти місця, margin-leftа іншу половину - margin-right.

— Росс
джерело

12

+1 За правильність. Буде чудовою відповіддю, якби ви детально розказали, що потрібно для margin:autoцентрування елемента в потоці. ( display:blockабо display:table, position:staticабо position:relativeтощо)

— Фрогз

1

@Phrogz погодився; додав пояснення.

— Росс

15

Тим, хто читає це, також може бути корисним додавання "float" жодного, оскільки будь-який інший тип float не призведе до заповнення вашого поля.

— Code Whisperer

Але це все ще не зосереджено. Це лише по центру горизонтально. Я хочу зосереджувати його вертикально, але навіть якщо я перейшов 0px autoна просто, autoвін все ще не працює.

— Аарон Франке

14

У деяких випадках (наприклад, більш ранніх версіях IE, Gecko, Webkit) і наслідування, елементи з position:relative;завадять margin:0 auto;працювати, навіть якщо top, right, bottomі leftне встановлені.

Встановлення елемента position:static;(за замовчуванням) може виправити його за цих обставин. Як правило, елементи рівня блоку із заданою шириною будуть дотримуватися margin:0 auto;використання relativeабо staticпозиціонування.

— Брендан
джерело

1

margin: 0 autoпрацює чудово на відносно розташованих елементах, якщо вони блокові елементи без поплавця та заданої ширини ...

— Ennui

Я припускаю, що це сарказм. Якщо ви відредагуєте свою відповідь так, щоб вона була неточною, я видалю голосову заяву. Я пишу CSS майже 15 років і не можу ніколи згадати автоматичні поля, які не працюють на горизонтальному центрі відносно розташованих елементів фіксованої ширини - хоча інші властивості люблять floatі displayможуть змінити таку поведінку.

— Ennui

14

Ви можете відцентрувати автоматичну поділку ширини за допомогою display:table;

div{
margin: 0px auto;
float: none;
display: table;
}

— той самийуор
джерело

1

Це працює, і я не знаю чому. Чи можете ви пояснити?

— ThatsJustCheesy

1

Я ніколи цього не використовував, але це працює для мене зараз.

— zkytony

10

У моєму випадку проблема полягала в тому, що я встановив min і max width без самої ширини .

— Даніель Сітарз
джерело

3

резюмувати: елемент повинен бути position:static, мати фіксований width:набір і бути display:blockелементом

— Joey T

Це було проблемою і для мене - bootstrap автоматично встановив мій div використовувати 100% доступність

— Edmund Sulzanok

6

Щоразу, коли ми не додаємо ширину та додаємо margin:auto, я думаю, це не спрацює. Це з мого досвіду. Ширина дає уявлення про те, де саме потрібно забезпечити рівні запаси.

— штани tejaswini
джерело

2

є альтернатива margin-left:auto; margin-right: auto;або margin:0 auto;для тих, хто використовує position:absolute;ось що:
ви встановите ліве положення елемента на 50% ( left:50%;), але це не буде правильно його центрувати для того, щоб елемент був центрирован правильно, вам потрібно надати його запас мінус половини його ширини, який ідеально центрирует ваш елемент

ось приклад: http://jsfiddle.net/35ERq/3/

— Андрій
джерело

0

Для кнопки завантаження:

display: table; 
margin: 0 auto;

— Аврам
джерело

0

помістіть це в css тіла: фон: # 3D668F; потім додайте: display: block; маржа: авто; до css img.

— Гейл
джерело