Вирівнювання блоків div по центру (css, div html). - deadblog.ru

1. Спосіб 1. Найкрутіший
2. Спосіб 2. Процентний
3. Спосіб 3. Змішаний
4. Спосіб 4. Використання додаткового блоку

У даній статті я розповім, як помістити блок div по центру. Способів існує безліч, але далеко не всі дозволяють зробити саме те, що потрібно. Наведу для прикладу найкращі і прості способи.

Взагалі, є дюжина способів як правильно вирівняти div блок по центру, кожен веб-майстер використовує свій улюблений \ найбільш зручний спосіб. Але тим не менш, є кілька основних, найбільш популярних і універсальних способу. І звичайно-ж, валідність за всіма сучасними стандартами.

І так, варто відразу сказати, що дані способи можуть не працювати в ie6, або щось подібне. Я навіть не звертаю увагу на даний браузер, не дивлячись на те, скільки людей ним користується. Пора б уже відучувати користуватися мотлохом.

Отже, що ми маємо?

Спосіб 1. Найкрутіший

margin: 0 auto;

Дуже ефективний метод, який до того-ж дозволяє вирівняти відступи зверху і знизу. У чому фішка методу? Все просто до божевілля. Ми маємо блок з певною шириною (в пікселях, або відсотках), якому за допомогою властивості «auto» задаємо однаковий відступ справа і зліва, в результаті отримуємо div-блок по центру. Перше значення (0 в прикладі) - це відступ зверху і знизу.

Наприклад, для вирівнювання зверху пишемо:

margin: 10px auto;

Для вирівнювання зверху і знизу:

margin: 10px auto 5px;

На мій погляд - це найкращий спосіб вирівняти блоки по центру. До того-ж він повністю пройшов стандартизацію.

Спосіб 2. Процентний

Якщо блок має ширину у відсотках, то ми можемо вирівняти div по центру застосовуючи рівні відступи, щоб добити повну ширину до 100%. Хто не зрозумів, покажу на прикладі, так простіше:

Маємо блок шириною 50%, щоб вирівняти його по центру, нам потрібно бічні відступи зробити по 25% справа і зліва відповідно. Дивимося код:

# Test2 {margin: 0 25% 0 25%; width: 50%; }

Чи не напружуючись, отримуємо блок по центру, вирівняний банальної математикою (50 + 25 + 25) 🙂

Спосіб 3. Змішаний

Даний спосіб порадив в коментарях sman.

# Test3 {left: 50%; margin-left: -500px; position: absolute; width: 1000px; }

Як я згадував на початку статті, способів вирівняти блок по центру безліч. Кожен вибірCgает той, який йому більше до душі. Чекаю коментарів і нових способів 🙂

Спосіб 4. Використання додаткового блоку

спосіб запропонував Віктор в коментарях:

Жоден метод не вирішує проблему з float всередині блоку, якщо ширина блоку свідомо не відома (наприклад, меню).

У таких випадках використовую додатковий блок, який обгортає вирівняти блок. Стиль приблизно так:

# Dop-block {position: relative; float: right; right: 50%; } #Block {position: relative; float: left; left: 50%; }