Павло Соловйов Наша взаимовыгодная связь https://banwar.org/
Frontend розробник
Осі в CSS
До сих пір в CSS було проблемою, що він працює переважно вздовж однієї осі. Залежно від контексту це може бути вертикальна або горизонтальна вісь. І це чудово підходить для стека блокових елементів (розташованих один за іншим), наприклад:
~~~ {.css} display: block; width: 100%;
Також легко відобразити елементи уздовж горизонтальної осі використовуючи плаваючі елементи (float). Однак якщо ви хочете зробити елементи динамічно на обидві осі, то у вас буде не так багато варіантів для цього. В такому випадку вам доведеться використовувати обхідні шляхи або способи засновані на JavaScript. Але на даний момент нова специфікація CSS column (CSS стовпці) дає нам нову надію на досягнення цієї мети використовуючи тільки чистий CSS. Примітно, що CSS стовпці віддають пріоритет вертикальному вирівнюванню перед горизонтальним. ### Горизонтальний центрування Горизонтальне центрування зробити дуже просто. Існує кілька способів для досягнення ефекту горизонтального центрування елементів: ### Inline-block і Inline елементи з вирівнюванням тексту Inline-block і Inline елементи, обробляються як текст - вони розраховують свої власні значення ширини і не реагують на заявлену ширину, якщо ви не оголосили їх як блокові елементи (див. далі). ~~~ {.css} display: inline; / * [Або] display: inline-block; * / Text-align: center;Inline-block і блокові елементи з полями
Елементи, які оголошені як inline-block або block можна вирівняти горизонтально по центру за допомогою лівого та правого полів (margin), які розраховуються автоматично:
~~~ {.css} display: block; margin-left: auto; margin-right: auto;
### Нюанси з вертикальним центрированием Вирівнювання елементів по вертикалі було досить складним завданням. Було опубліковано багато обхідних шляхів - Chris Coyier (з CSS Triks) зробив дивовижну добірку можливих хаков - так що я не буду тут їх докладно описувати. Для прикладів в цій статті використовується наступна розмітка: ~~~ {.html} <div class = "box"> <div> Вміст, яке буде відцентроване по вертикалі </ div> </ div>Використання макета таблиці
Простий і швидкий спосіб змусити елемент центрироваться по вертикалі - це зробити елемент осередком таблиці: наприклад, використовуючи display: table і display: table-cell і застосовуючи стиль vertical-align: middle;
~~~ {.css} html, body {height: 100%; padding: 0px; margin: 0px; }
.box {display: table; width: 100%; }
.box> div {display: table-cell; text-align: center; vertical-align: middle; }
[Http://jsfiddle.net/devacademy/zEGF9/1/](http://jsfiddle.net/devacademy/zEGF9/1/) {: target = "_ blank"} ### Метод, заснований на JavaScript Для людей , які не є прихильниками макета таблиці, можуть використовувати JavaScript. Для нашого прикладу я вибрав jQuery через його простоти використання, але зробити це за допомогою чистого JS, звичайно ж, теж можливо. Давайте зробимо базові стилі на CSS: ~~~ {.css} html, body {height: 100%; padding: 0px; margin: 0px; } .Box {position: relative; width: 100%; height: 100%; } .Box> div {position: absolute; top: 50%; left: 50%; }Оголошення розмірів блоку батька обов'язково, тому що абсолютно позиціонуючи дочірній елемент, ми вириваєм його з потоку документа, і тому батьківський блок може згорнутися (collapse).
Зараз ми позиціонуємо внутрішній div, таким чином, щоб вона дивилася ліва точка буде в середині батька, по горизонталі і вертикалі. Однак так як дочірній елемент також має ненульову ширину, він буде відображатися занадто далеко вниз і занадто далеко вліво - тому такий спосіб робить центрування неповним. Для того, щоб компенсувати дочірній елемент, заснований на його вмісті, нам доведеться обчислити зсув, використовуючи його власні розміри за допомогою JavaScript:
~~~ {.javascript} $ (function () {// Прослуховув подія resize, щоб перерахувати розміри блоку $ (window) .resize (function () {$ ( '. Box> div'). Each (function () { $ (this) .css ({marginTop: $ (this) .outerHeight () -0.5, marginLeft: $ (this) .outerWidth () -0.5});});}) .resize (); // Викликаємо resize коли DOM вже завантажився});
[Http://jsfiddle.net/devacademy/T7YqB/2/](http://jsfiddle.net/devacademy/T7YqB/2/) {: target = "_ blank"} Однак недоліком цього методу на основі JS є те, що він незграбно виглядає і не працює з відвідувачами, які відключили JS (швидше за все, то вже не актуально, але тим не менш, я хотів би цього уникнути) і вимагає прослуховувати події зміни розміру вікна для обчислення розмірів елемента. Крім того, браузери викликають ** resize ** подія занадто часто. ### Новий спосіб: CSS 2D transform З появою підтримки в браузерах ** CSS 2D transform ** (до 80% користувачів у світі), то тепер можна вертикально центрировать елементи без особливих труднощів, хоча цей спосіб як і раніше вимагає один додатковий рівень вкладеності. Цей трюк CSS 2D transform дуже простий - замість обчислення в JavaScript, нехай движок браузера робить важку роботу: ~~~ {.css} .box {position: relative; width: 100%; height: 100%; } .Box> div {position: absolute; top: 50%; left: 50%; -webkit-transform: translate (-50%, -50%); transform: translate (-50%, -50%); }http://jsfiddle.net/devacademy/3BsR3/ {: Target = "_ blank"}
Якщо ви центріруете елементи за допомогою CSS 2D transform, то користувачі, які на жаль застрягли в старих браузерах (причина цього: самі не хочуть оновлюватися або не вміють або через обмеження компанії в якій вони працюють) не обслуговуватимуться. Для них ваш сайт буде виглядати не зовсім правильно. Але ви можете використовувати резервний варіант - наприклад, використовувати Modernizr для виявлення відсутності CSS transform і використовувати альтернативні методи для досягнення того ж ефекту на браузерах, які не підтримують цю технологію.
З метою підтримки WebKit користувачів, вам потрібно буде використовувати префікс конкретно для браузерів на цьому движку, тобто -webkit-. Це трохи дивно, тому що версії Internet Explorer, а саме 10 і вище, підтримує властивість transform без необхідності префікс -ms.
Крім того можна підтримати ідеї graceful degradation (відмовостійкість клієнтських веб-інтерфейсів) і progressive enhancement (прогресивне поліпшення), які дозволяють користувачам використовувати візуально недосконалий, але повністю функціональний сайт.
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
