Блог → Як вирівняти DIV по центру сторінки на чистому CSS?
До сих пір в Інтернеті можна зустріти способи, які рекомендують робити відступи в процентах, але я рекомендую про них забути, і не користуватися. На сьогодні найбільш простим і елегантним свособом є інший - із завданням автоматичного відступу (auto) для кордонів (margin). Якщо конкретніше, то виглядати ця стильова конструкція буде так: "margin: 0px auto". І на прикладі. Так виглядає код HTML (test.html):
А ось так CSS (style.css):
#wrap <
margin: 0px auto;
width: 500px;
background-color: Brown;
>
Перевіряємо! Все відмінно працює в Chrome, Opera і Firefox. На доказ наводжу скріншот, зроблений з віконця Хрома.
І ось тут криється маленький нюанс, на якому часто спотикаються не тільки початківці верстальники, а й цілком досвідчені. Чи не через незнання питання, а банально - відволіклися, що не встежили, голова іншим зайнята і ін. Відкриваємо сторінку в Internet Explorer'е і бачимо зовсім іншу картину.
Чому так. Я, була справа, одного разу просидів хвилин 20, розбираючись в CSS, поки не здогадався, в чому тут "затикаючи". Як часто буває - в дрібниці. Не забуваємо вказувати DOCTYPE! Адже якщо більшість остальниз браузерів додумує його "на льоту", то Експлорер (в моєму випадку IE9) виявився гранично суворий до забудькуватості верстальника. Вказуємо DOCTYPE для прикладу вище, і - вуаля, все працює як треба і в IE! Ось остаточна версія HTML коду (test.html):