Як вирівняти div по центру
Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 3-05-2013, 02:29 13 158 1Необхідність вирівняти якийсь блоковий елемент по центру є не рідкісною в повсякденній роботі верстальника.
Багато верстальників спотикаються об те, що css-властивість text-align: center; для батьківського елемента приводить до вирівнювання блоку по центру тільки в Internet Explorer, в інших браузерах це не приносить очікуваного результату. Це пов'язано з тим, що у всіх браузерах, крім Internet Explorer, властивість text-align: center застосовується тільки до рядкових елементів.
Варіант 1 (align = "center") Суть методу в тому, що батьківському блоку (тому, в якому потрібно вирівняти блок по центру) присвоюється атрибут align = "center". Цей атрибут вказує на те, що весь вміст блоку має бути вирівняний по центру. Даний метод практично не працює в блочній верстці.
.content {
text-align: center;
}
Варіант 2 (margin: 0 auto ;) Цей метод методу вирівнювання div по центру є більш ефективним, ніж попередній. Метод заснований на тому, що блоку, який потрібно вирівняти по центру застосовується css-властивість margin: 0 auto;. Таким чином, якщо необхідно буде ще додати тільки відступ зверху необхідно змінити на margin: 10px auto 0; або на margin: 10px auto; якщо відступ потрібен зверху і знизу.
.content {
margin:0 auto;
}
Варіант 3 (позиціонування і від'ємний відступ) Для того щоб вирівняти блок по центру можна ще скористатися цим способом вирівнювання блоку по центру. Він полягає в тому, що блок позиціонується в батьківському елементі і потім зсувається вліво на 50%, але таким чином елемент буде розміщений не зовсім по центру і для того щоб це змінити блоку присвоюється негативний відступ зліва рівний половині ширини блоку щоб чітко вирівняти його по центру . Головне в цьому методі не забути привласнити блоку позиціонування.
.content {
position:relative; left:50%;
margin-left:-100px;
width:200px;
}
* (-100рх це 50% від width:200px)