Вирівнювання горизонтального меню (або пейджера) по центру сторінки, Проза життя
Багатьом новачкам здається дуже складним вирівняти горизонтальне меню (пейджер) центром веб-сторінки. Через це з'явилося багато варіантів центрування за допомогою хаків та з використанням яваскрипт-програмування. Насправді все набагато простіше. Це робиться за допомогою чистого CSS. Необхідно трохи розібратися з відносним позиціонуванням та з правилом float. Отже, маємо перелік. Я його представлю тут ось так. Дужки змінені, цей ресурс чомусь не дав мені поставити такі, як треба.
(div) (ul) (li)(a href='#")Вкладка' > (li)(a href='#")Вкладка' > (li)(a href='#")Вкладка' > (/ul) (/div) Для початку, застосуємо звичайні правила CSS, щоб побудувати меню по горизонталі:
Маємо таке меню. Пункти меню притиснулися до лівого боку браузера. Ця поведінка легко передбачувана. Зараз потрібно звернути увагу на 2 моменти, на яких будується спосіб центрування меню: 1. У відносному позиціонуванні відсоток зміщення залежить від ширини батька. 2. Ширина батька, до якого застосовано властивість float, буде відповідати сумі довжин дочірніх плаваючих елементів. Цього цілком вистачить, щоб досягти бажаного результату. Застосуємо до ul властивість float: left та його ширина дорівнюватиме сумі довжин всіх li які знаходяться всередині. Потім застосуємо щодо відносне позиціонування і змістимо його праворуч на 50%. Список переміститься на половину ширини вікна браузера. Після цього застосуємо відносне позиціонування до пунктів меню li і змістимо їх ліворуч на 50%, але зараз зміщення відбудеться не на половину ширини вікна браузера, а наполовину ширини елемента ul. Таким чином, ми отримаємо горизонтальне меню, вирівняне по центру вікна.браузер. Залишився останній штрих. Через зміщення елемента ul могла з'явитися горизонтальна смуга прокручування, тому для обгортаючого елемента div необхідно застосувати властивість overflow: hidden. Ще один штрих - до контейнера div використовуємо якість position: relative, щоб вирішити проблеми кроссбраузерності в ие7 і нижче (спасибі Dench). Вийшов такий CSS:
Цей спосіб коректно відображається всіма популярними браузерами і успішно проходить перевірку на валідаторе. Буду радий, якщо піст виявився комусь корисним.