Розробка, підтримка, SEO, просування, соцмережі та реклама сайтів ☣
Кабінет клієнта
Зареєструватись Забули пароль?
Створення та оптимізація сайтів » Блог » faq » Як вирівняти div по центру

Як вирівняти div по центру

Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 3-05-2013, 02:29 5 538 1
Як вирівняти div по центру

Необхідність вирівняти якийсь блоковий елемент по центру є не рідкісною в повсякденній роботі верстальника.

Багато верстальників спотикаються об те, що 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)

 
 


Коментарі

Роксоляна
◈ Гости
№ 1
Корисна інформація, дякую!

⤹ Залишити свій коментар ⤸

  • оновити, якщо не видно коду

Тарифні плани

Потужний старт Стандартний запуск сайту від $400
  • - ♜ -
  • В стартовий тарифний план входить:

  • Розробка та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 5 сторінок
  • Ліцензія двигунчика DLE
Просунутий SEO оптимізований сайт від $700
  • - ♚ -
  • В SEO тарифний план входить:

  • Створення та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 10 сторінок
  • Ліцензія двигунчика DLE
  • 5 силок + перелінковка
Імперський винущувач конкурентів від $999
  • - ♛ -
  • В імперський тарифний план входить:

  • Розробка сайту
  • Наповнення до SEO 20 сторінок
  • Повна оптимізація
  • Ліцензія двигунчика DLE
  • МОЄ НАТХНЕННЯ та ДОСВІД!
/* soc-knopki */