Вирівнювання горизонтального меню (або пейджера) по центру сторінки
Багатьом новачкам здається дуже складним вирівняти горизонтальне меню (пейджер) по центру веб-сторінки. Через це з'явилося багато варіантів центрування за допомогою хаков і з використанням яваскрипт-програмування. Насправді все набагато простіше. Це робиться з використанням чистого CSS. Необхідно трохи розібратися з відносним позиціонуванням і з правилом float. Отже, маємо список. Я його представлю тут ось так. Дужки змінені, цей ресурс чомусь не дав мені поставити такі, як треба.
(Div)
(Ul)
(Li) (a href ="#") Вкладка один (/ a) (/ li)
(Li) (a href ="#") Вкладка два (/ a) (/ li)
(Li) (a href ="#") Вкладка три (/ a) (/ li)
(/ Ul)
(/ Div)
Для початку, застосуємо звичайні правила CSS, щоб побудувати меню по горизонталі:
div {border-bottom: 1px solid orange- float: left; width: 100%}
ul {margin: 0-padding: 0-}
ul li {float: left; list-style: none;}
ul li a {display: block-padding: 5px; text-decoration: none; border-right: 1px solid # fff-background: yellow}
Маємо таке меню.
Пункти меню притиснулися до лівої сторони браузера. Це поведінка легко передбачувано.
Зараз потрібно звернути увагу на два моменти, на яких і будується спосіб центрування меню:
1. У відносному позиціонуванні, відсоток зсуву залежить від ширини батька.
2. Ширина батька, до якого застосовано властивість float, буде відповідати сумі довжин дочірніх плаваючих елементів.
Цього цілком вистачить, щоб домогтися бажаного результату.
Застосуємо до ul властивість float: left і його ширина дорівнюватиме сумі довжин всіх li які знаходяться всередині. Потім застосуємо до нього відносне позиціонування і змістимо його вправо на 50%. Список зміститься на половину ширини вікна браузера. Після цього застосуємо відносне позиціонування до самих пунктів меню li і змістимо їх вліво на 50%, але зараз зміщення відбудеться не на половину ширини вікна браузера, а наполовину ширини елемента ul. Таким чином ми отримаємо горизонтальне меню, вирівняне по центру вікна браузера. Залишився останній штрих. Через зсув елемента ul, могла з'явиться горизонтальна смуга прокрутки, тому для обгортають елемента div необхідно застосувати властивість overflow: hidden. Ще один штрих - до контейнера div застосовуємо властивість position: relative, щоб вирішити проблеми кросбраузерності в ІЕ7 і нижче (спасибі Dench).
Вийшов такий CSS:
div {border-bottom: 1px solid orange- float: left; width: 100% - overflow: hidden-position: relative}
ul {margin: 0-padding: 0- float: left; position: relative- left: 50%}
ul li {float: left; list-style: none; position: relative- right: 50%}
ul li a {display: block-padding: 5px; text-decoration: none; border-right: 1px solid # fff-background: yellow}
Цей спосіб коректно відображається всіма популярними браузерами і з успіхом проходить перевірку на валідаторі. Буду радий, якщо пост виявився комусь корисний.
Результат можна подивитися тут:
https://cssmaster.ru/files/menu/menu.html
