Центрування div-а по горизонталі і вертикалі

У цій короткій замітці Ви дізнаєтеся про декілька способів центрування об'єктів на сторінці по вертикалі і горизонталі.

При створенні веб сторінок Ви, напевно, стикалися з ситуацією коли необхідно якийсь об'єкт розмістити в самому центрі. Існує безліч шляхів вирішення цієї проблеми.

Горизонтальне центрування з помощьюCSS

Це дуже просто

Для центрування по горизонталі Вам необхідно задати ширину, а також значення auto для лівого і правого відступу (тут ми використовуємо скорочену запис CSS). Цей спосіб працює з блочними елементами (div. P. H1, інше.). Для інлайнових (посилання і зображення) елементів Вам необхідно додати ще одне правило - display: block.

Вирівнювання по горизонталі і вертикалі

Центрування в обох напрямках здійснити трохи складніше. Вам необхідно знати заздалегідь точні розміри об'єкту.

Позиціонуючи об'єкт абсолютно, ми можемо "вирвати" його з сторінки і задати для нього позицію по відношенню до браузеру. Досить вказати 50% для значень left і top і об'єкт буде знаходиться по центру. Єдине, що нам необхідно зробити, це пересунути об'єкт на половину висоти і ширини вліво і вгору, щоб він був в самому центрі.

Горизонтальне і вертикальне вирівнювання з помощьюjQuery

Як зазначалося раніше - метод CSS прекрасно працює з об'єктами з відомими розмірами. Якщо їх немає, тоді нам стане в нагоді jQuery.

Весь функціонал вбудований в функцію $ (window) .resize (), яка виконується при кожній зміні вікна браузера. Ми використовуємо outerWidth () і outerHeight (), так як на відміну від width () і height (), вони беруть до уваги ширину відступів і кордонів.

Великий плюс даного методу полягає в тому, що Вам не обов'язково знати розмір об'єкта.

Сподіваюся, Вам це знадобиться!

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!