Вирівнювання блоків по центру в css, w3 просвіта
Вирівнювання вмісту по горизонталі, яке має властивість float, можна зробити дуже легко і крім того повністю кросбраузерності (працює в Opera 8+, Firefox 3+, IE 5.5+).
Приклад вирівнювання div-блоку
Щоб вирівняти блок з властивістю float або кілька розташованих в ряд блоків, необхідний ще один зовнішній блок. Зовнішнього блоку і внутрішнім блокам призначається position: absolute; і float: left ;. зовнішньому призначити left: 50% ;. а внутрішнім блокам right: 50% ;. Для використання float: right; потрібно призначити зовнішньому призначити right: 50% ;. а внутрішнім блокам left: 50% ;. Рекомендую очищати float, розміщуючи після вирівняні по центру елементів блок з властивістю clear: both; .
Таким чином можна домогтися такого центрування:
Кордон зеленого кольору має внутрішній блок з id = block-inner, переривчасту червону кордон має зовнішній блок з id = block.
HTML-код прикладу зображеного нижче виглядає так:
CSS-код прикладу зображеного нижче виглядає так:
Приклад вирівнювання пунктів меню
Практично даний вище приклад можна застосувати при горизонтальному вирівнюванні меню сайту. Однак, при цьому потрібно взяти до уваги те, що при досить великій кількості пунктів (які займають по ширині більше половини сторінки) з'являється горизонтальна прокрутка. Щоб її позбутися потрібно в зовнішньому блоці застосувати властивість overflow. Якщо меню, що випадає, то його випадають пункти можуть зрізати цим зовнішнім блоком. Щоб уникнути цієї проблеми, необхідно застосовувати властивість overflow до блоку якомога більше осяжний, наприклад, самому зовнішньому блоку, що обрамляє весь вміст сторінки.
Наприклад можна вирівняти меню так:
Кордон зеленого кольору мають пункти li списку ul. переривчасту червону кордон має список ul.
HTML-код прикладу зображеного нижче виглядає так:
CSS-код прикладу зображеного нижче виглядає так:
Так що все досить просто. Бажаю успіхів в освоєнні нових методів.