Windows. Internet Explorer 6.0+, Firefox 1.0+, Google Chrome, Opera 9.0+ [1]. Safari 3.1+, SeaMonkey 1.0+.
Linux. Firefox 1.0+, Chromium, Opera 9.0+ [2]. SeaMonkey 1.0+.
1. Контейнер вирівнюється по центру, якщо дозвіл екрана монітора дорівнює або більше 1024x768 - [Відкрити сторінку-приклад]
2. Контейнер вирівнюється по центру, якщо дозвіл екрана монітора дорівнює або більше 1024x768 + курсор миші наводиться на посилання в одному з елементів вмісту сторінки - [Відкрити сторінку-приклад]
HTML / XHTML. код:
2. В тілі даної сторінки створюється елемент A (сірий колір) блочного рівня c явно зазначеними розмірами, наприклад, 800 на 500 пікселів і відносним позиціонуванням. [Результат].
HTML / XHTML. код:
HTML / XHTML. код:
if (wresolution> = 1024 hresolution> = 768)
var element_A = window.getComputedStyle (document.getElementById ( 'element_A'), '');
document.getElementById ( 'element_A') .style.left = (w-element_A_width) / 2 + 'px';
document.getElementById ( 'element_A') .style.top = (h-element_A_height) / 2 + 'px';
document.getElementById ( 'element_A') .style.left = (w2-element_A_width) / 2 + 'px';
document.getElementById ( 'element_A') .style.top = (h2-element_A_height) / 2 + 'px';
HTML / XHTML. код:
HTML / XHTML. код:
Розглядається найпростіший випадок - для демонстрації самої можливості і її принципу - динамічного зміни положення елемента в видимій області вікна браузера.
перший випадок
Умова. якщо дозвіл екрана монітора дорівнює або більше 1024 на 768 пікселів, то тоді вирівняти вміст сторінки по ширині і висоті
Створюється елемент A з зазначеними в явному вигляді шириною і висотою. Визначається дозвіл екрана монітора - якесь задане значення якого буде служити умовою, при якому буде спрацьовувати скрипт, наприклад - 1024x768. У разі, якщо скрипт виявляє, що дозвіл екрана монітора дорівнює або більше 1024 на 768 пікселів, то запускається інша частина функції, яка з'ясовує розміри (задані в зовнішньому файлі стильових опису CSS властивості) елемента A. ширину і висоту видимої області вікна браузера. З використанням отриманих чисел обчислюється на якій відстані від лівого і верхнього краю видимої області вікна браузера повинен знаходитися лівий і верхній край елемента A. що б елемент A був вирівняний по центру, по ширині і по висоті. У сенсі чисел і CSS, це коли CSS властивість "left" елемента A дорівнює половині різниці між шириною видимої області вікна браузера і шириною елемент A. а CSS властивість "top" елемента A дорівнює половині різниці між висотою видимої області вікна браузера і висотою елемент A .
Так як користувач може змінити розмір вікна браузера після того, як сторінка вже завантажена, то відслідковуються зміни розмірів вікна браузера. І при кожній зміні, функція, яка вирівнює елемент A по центру, по ширині і по висоті, запускається за новою і заново вирівнює елемент A по центру, по ширині і по висоті при нових розмірах видимої області вікна браузера.
другий випадок
Умова. якщо дозвіл екрана монітора дорівнює або більше 1024 на 768 пікселів і якщо курсор миші наводиться на посилання в елементі A. то тоді вирівняти вміст сторінки по ширині і висоті
Оскільки користувач може змінити розмір вікна браузера після того, як сторінка вже завантажена, то як і в першому випадку відслідковуються зміни розмірів вікна браузера. І при кожній зміні, функція, яка вирівнює елемент A по центру, по ширині і по висоті, запускається за новою і заново вирівнює елемент A по центру, по ширині і по висоті при нових розмірах видимої області вікна браузера.
В принципі, працює починаючи і з Opera 7.5, але з помилками на деяку кількість пікселів.
В принципі, працює починаючи і з Opera 7.5, але з помилками на деяку кількість пікселів.