Як горизонтально центрувати діл всередині батьківського діва

114

Як центрувати divгоризонтально всередині свого батька divз CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>

html css

— Орел
джерело

1

Ось два прості методи центрування знаків у divs, вертикально, горизонтально або обидва (чистий CSS): stackoverflow.com/a/31977476/3597276

— Michael Benjamin

158

Я припускаю, що батьківський div не має ширини чи широкої ширини, а дочірній дів має меншу ширину. Далі буде встановлено поле для верхньої та нижньої до нуля, а сторони автоматично підганяються. Це центр діва.

div#child {
    margin: 0 auto;
}

— Позначити Embling
джерело

@Mark. Чи знаєте ви, як змусити його працювати в IE6? IE6 справді багато смокче, але все ж є деякі люди, які його використовують.

— Бахтіор

@Bakhtiyor: наскільки я пам’ятаю, це робить. Які проблеми ви бачите? ви можете відкрити нове запитання, якщо є якась конкретна проблема, яку ви не торкалися раніше. У мене немає доступу до IE6, щоб перевірити, хоча.

— Марк Embling

3

@Bakhtiyor: на самому ділі, подумавши про це, я думаю , що в IE.old ви також повинні встановити text-align: center;на parentDIV , а потім встановити його назад вліво (або будь-який інший ) для childодного. Не впевнений, чи стосується ця проблема IE6 ...

— Марк Embling

@Mark & @Bakhtiyor чомусь у мене було враження, що мій дів був childзміщений ліворуч - порівняно з браузерами, які відповідають стандартам - у всіх версіях IE, які я перевірив (IE6-8). І text-align: center;для, parentі text-align: left;для childвиправлених для всіх цих версій.

— brookmarker

8

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

— Джеймс Гудвін
джерело

2

Це рішення підтримує IE 6, але не забудьте додати text-align:left;до #div div

— Moak

1

text-align:centerдо дитячого діва чи батьківського діва?

— Аніш Наїр

6

Лише з цікавості, якщо ви хочете відцентрувати два чи більше діви (тож вони поруч у центрі), то ось як це зробити:

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

— Пол Кріс Джонс
джерело

4

Ви можете використовувати значення "auto" для лівого та правого поля, щоб браузер рівномірно розподіляв доступний простір по обидва боки внутрішнього розділу:

<div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>

— x4u
джерело

2

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>

— Суфіан Хасу
джерело