У статті "Горизонтальний центрування блоку засобами CSS" ми розглянули кілька способів центрування блоку по горизонталі. Іноді буває потрібно відцентрувати блок ще й по вертикалі, наприклад flash-заставка на головній сторінці сайту або навіть весь сайт в прямокутнику фіксованого розміру, розміщений завжди в центрі вікна браузера.
Без зайвих слів перейдемо відразу до справи. Для простоти експерименту центрировать блок будемо щодо елемента
. Спершу встановлюємо ширину і висоту елемента, в якому розмістимо наш блок (це знадобиться для будь-якого елемента, в якому будемо щось центрировать), а потім ще обнулив значення відступів на випадок, якщо у дожен бути якийсь фон.А тепер перейдемо до головного і розглянемо кілька прикладів.
У блоку абсолютні значення ширини і висоти.
Припустимо, що нам треба розмістити на головній сторінці сайту flash-заставку шириною 300 пікселів і висотою 200 пікселів. Укладемо її всередину елемента
Після чого опишемо CSS-властивості цього блоку:
Тут ми вказуємо абсолютне позиціонування блоку, лівий верхній кут розміщуємо по центру вікна, а потім зміщуємо блок вгору і вліво за допомогою негативних значень margin, які дорівнюють половині висоти і ширини блоку, відповідно. Повний код прикладу наведено нижче:
Все дуже просто і ніяких громіздких таблиць!
У блоку відносні значення ширини і висоти.
На цей раз для позиціонування блоку використовуємо лише координати його лівого верхнього кута. Віднімаємо із загальної висоти зовнішнього блоку (на початку статті вирішили що це буде
) Висоту центрована блоку (100% - 50% = 50%). ділимо її навпіл і отримуємо top: 25%. Також чинимо з шириною і відповідно відступом зліва (в прикладі: left: 25%).Залишається додати, якщо всередині нашого блоку буде щось фіксованого розміру (наприклад зображення), він і його вміст будуть центрироваться поки його розміри більше, або рівні розмірам вмісту. Блок буде позиційований точно так, як ми йому вказали в CSS, але відступи від кордону вікна до того, що знаходиться всередині блоку по вертикалі не будуть однаковими, і відступи по горизонталі теж, тобто центрування порушиться.
дідько))
щас заберу посилання
мдя) ну да ладно)
На жаль приклад абсолютно не котить, якщо висота центрована діва перевищує висоту видимої частини в браузері. Іншими словами, при висоті 500 в 800 × 600 виходить фігня = (Хоча тож самое в 1600 * 1200 виглядало б ідеально
display: table-cell; vertical-align: middle; Для абсолютної висоти
На практиці величини зазвичай відносні, доводиться перекручуватися
Guest, ця фішка в IE не оре, а в Opera і FireFox ідеально!
Що для IE порадиш?
Якщо поставити 100%, то з'явиться смуга прокрутки, а це не Тру :)
В IE vertical-align зовсім погано працює, якщо не сказати ніяк
оригінал прикладу працює і в IE і в взагалі ....
а для центірованія по горизонталі чи не простіше написати margin: 0 auto; м?
Дякую за статтю, однак запропонований спос не вирішує завдання в Firefox 2.0 і MSIE 6.0
Точніше сказатьт, якщо розмір вікна більше розміру блоку - все добре, але от чи варто зробити вікно по горизонталі або вертикалі так, щоб блок не поміщався повністю - і привіт, верхній або лівий край блоку їде в негативну (невидиму) область. Для наочності можна дати йому (блоку) border: 1px solid red; - видно, як він зникає. Знизу і праворуч - все добре.