Каскадні таблиці стилів CSS поради & прийоми

Найпоширеніший і (тому) найлегший тип центрування - це центрування рядків тексту в абзаці або заголовку. Для цього CSS має властивість 'text-align':

яке відображає кожен рядок в абзаці P або заголовку H2 по центру між полями, ось так:

Всі рядки цього абзацу вирівняні по центру полями абзацу. Це стало можливим завдяки значенню 'center' властивості CSS 'text-align'.

Центрування блоку чи зображення

Іноді центрувати потрібно не текст, а блок загалом. Або, інакше кажучи: ми хочемо, щоб праве та ліве поля були однаковими. Для цього потрібно встановити поля на auto. Це зазвичай використовується для блоків із фіксованою шириною, тому що якщо блок сам по собі гнучкий, він просто займе всю доступну ширину. Ось приклад:

P.blocktext < margin-left: auto; margin-right: auto; width: 6em >. Цей досить.

Цей досить тонкий блок тексту центрований. Зауважте, що рядки всередині блоку не центровані (вони вирівняні вліво), на відміну попереднього прикладу.

Цей метод також можна використовувати для центрування зображення: помістіть його у власний блок та застосуйте властивості полів. Наприклад:

Наступне зображення центроване:

Вертикальне центрування

CSS рівня 2 не має властивості вертикального центрування. Ймовірно, воно з'явиться у версії CSS рівня 3 (див. нижче). Але навіть у CSS2 можна центрувати блоки вертикально за допомогою комбінування декількох властивостей. Хитрість у тому, щоб зазначити, що зовнішній блок може бути відформатований як осередок таблиці, т.к. вміст комірки таблиці може бути вирівняне по центру вертикально.

Наведений нижче приклад демонструє центрування абзацу всередині блоку, який має певну задану висоту. Окремий приклад показує абзац, який центрований вертикально у вікні браузера, тому що знаходиться всередині блоку, позиціонованого абсолютно і висотою вікна.

DIV.container < min-height: 10em; display: table-cell; vertical-align: middle >.  
Цей маленький абзац.

Цей маленький абзац центрується вертикально.

Центрування по вертикалі в CSS рівня 3

Рівень 3 CSS пропонує інші можливості. На момент написання цієї статті (2014 рік) хороший спосіб вертикального вирівнювання блоку без використання абсолютного позиціонування (що може призводити до часткового перекриття тексту) все ще обговорюється. Але якщо ви знаєте, що часткове перекриття тексту не стане проблемою у вашому документі, ви можете використовувати властивість 'transform', щоб вирівняти по центру абсолютно позиціонований елемент. Наприклад:

Цей абзац вирівняно вертикально по центру.

Для документа, який виглядає так:

таблиця стилів виглядає так:

div.container3 < height: 10em;  position: relative > /* 1 */ div.container3 p < margin: 0;  position: absolute; /* 2 */ top: 50%; /* 3 */ transform: translate(0, -50%) > /* 4 */

1. Зробіть контейнер щодо позиціонованого (position: relative), що перетворить його на контейнер для абсолютно позиціонованих елементів.
2. Сам елемент зробіть абсолютно позиціонованим (position: absolute).
3. Помістіть елемент усередині контейнера за допомогою 'top: 50%'. (Зверніть увагу, що '50%' тут означають 50% висоти контейнера.)
4. Використовуйте translate, щоб перемістити елемент вгору на половину власної висоти.( '50%' в 'translate(0, -50%)' вказують на висоту самого елемента.)

Нещодавно (починаючи приблизно з 2015 року) у кількох реалізаціях CSS стала доступна нова техніка. Вона ґрунтується на новому ключовому слові 'flex' для властивості 'display'. Це ключове слово призначене для використання в графічному інтерфейсі користувача (GUI), але ніщо не заважає вам використовувати його в документі, якщо цей документ має правильну структуру.

Цей абзац вирівняний по центру вертикально.

таблиця стилів виглядає так:

Вертикальне та горизонтальне центрування у CSS рівня 3

Ми можемо розширити обидва методи, щоб центрувати по горизонталі та по вертикалі одночасно.

Побічний ефект абсолютного позиціонування абзацу полягає в тому, що абзац стає таким широким, яким він має бути (якщо тільки ми явно не вкажемо ширину). У прикладі нижче ми саме цього і хочемо: ми розміщуємо по центру абзац з одного слова (“Центр!”), так що ширина абзацу має дорівнювати ширині цього слова.

Жовте тло наочно демонструє, що абзац дійсно тієї ж ширини, що і його вміст. Ми маємо на увазі, що розмітка залишилася колишньою:

У плані вертикального центрування ця таблиця стилів схожа на таблицю з попереднього прикладу. Але тепер ми ще переміщуємо елемент на півдорозі через контейнер за допомогою правила 'left: 50%' і одночасно зрушуємо його вліво на половину своєї власної ширини в перетворенні 'translate':

div.container4 < height: 10em; position: relative >div.container4 p < margin: 0; background: yellow; position: absolute; top: 50%;  left: 50%;
margin-right: -50%; transform: translate(-50%, -50%) >

Наступний приклад пояснює, навіщо потрібне правило margin-right: -50%.

Коли форматер CSS підтримує 'flex', все стає легше:

з цією таблицею стилів:

тобто. єдиним доповненням є 'justify-content: center'. Так само, як 'align-items' визначає вертикальне вирівнювання вмісту контейнера, 'justify-content' таким же чином визначає горизонтальне вирівнювання. (Насправді все трохи складніше, як випливає з їхніх назв, але в простому випадку, працює це саме так.). Побічний ефект від застосування властивості 'flex' полягає в тому, що дочірній елемент, у нашому випадку це Р, автоматично стає настільки малим, наскільки це можливо.

Центрування в області перегляду в CSS рівня 3

Контейнер за промовчанням для абсолютно позиціонованих елементів є область перегляду. (У випадку з браузером це вікно браузера). Таким чином, центрування елемента в області перегляду не викликає складності. Далі наведено повний приклад. (У цьому прикладі використано синтаксис HTML5.)

Гарно вирівняний по центру
Цей текстовий блок вертикально вирівняний по центру.  
І горизонтально, якщо вікно досить широке.

Ви можете побачити результат у окремому документі.

Правило 'margin-right: -50%' необхідне компенсації 'left: 50%'. Правило left зменшує доступну для елемента ширину на 50%. Тому візуалізатор постарається зробити лінії довжиною трохи більше половини ширини контейнера.Вказавши на те, що праве поле елемента знаходиться правіше на ту саму величину, відзначимо, що максимальна довжина лінії знову дорівнює ширині контейнера.

Спробуйте змінити розмір вікна: ви побачите, що кожна пропозиція знаходиться на одному рядку, коли вікно є досить широким. Тільки тоді, коли вікно надто вузьке для всієї пропозиції, ця пропозиція буде розбита на кілька рядків. Коли ви видалите правило 'margin-right: -50%' і знову зміните розмір вікна, ви помітите, що пропозиції будуть розбиті, хоча вікно все ще ширше рядків тексту вдвічі.

Навігація сайтом

Created 5 May 2001;
Last updated Ср 06 Січ 2021 05:40:49

Як зменшити, звузити та центрувати тіло документа у фреймовій структурі?

Як центрувати та зменшити ширину тіла аналогічно marginheight/topmargin/marginwidth/leftmargin в HTML або margin/padding у CSS у фреймовій структурі?

Напевно, автор питання хотів "стиснути" (тобто встановити відступи з боків) сторінку, яка завантажиться у кадр.

@kirelagin Потрібно, так би мовити, "стиснути" по вертикальній осі все те, що знаходиться між початковим тегом та кінцевим я просто питання не правильно поставив. Що фрейми зло, з вами згоден. @John Brown Спасибі, розумна людина :) @uramer239 Непоганий варіант, але якщо стискати кожен кадр, то вони за умовчанням вирівнюються по лівому краю, а потрібно по центру. І ще, трохи незрозуміло, як iframe'ами ​​втиснути кожен кадр, просвітите :)

Створення кадрів

Незважаючи на те, що сайти з кадрами зустрічаються все рідше, вивчення HTML було б неповним без розгляду теми про кадри. До того ж фрейми в якомусь сенсі зайняли свою нішу та застосовуються для систем адміністрування та довідки.Там, де недоліки фреймів немає особливого значення, а переваги навпаки, активно затребувані.

Для створення кадру використовується тег , який замінює тег у документі та застосовується для розділення екрана на області. Усередині цього тега знаходяться теги , які вказують на HTML-документ, призначений для завантаження в область (рис. 13.1).

Мал. 13.1. Приклад поділу вікна браузера на два кадри

При використанні фреймів необхідно як мінімум три HTML-файли: перший визначає фреймову структуру і ділить вікно браузера на дві частини, а два документи, що залишилися, завантажуються в задані вікна. Кількість фреймів не обов'язково дорівнює двом, може бути і більше, але ніяк не менше двох, інакше взагалі втрачається сенс застосування фреймів.

Розглянемо етапи створення кадрів на основі сторінки, продемонстрованої на рис. 13.1. Нам знадобиться три файли: index.html – визначає структуру документа, menu.html – завантажується у лівий кадр і content.html – завантажується у правий кадр. З них лише index.html відрізняється структурою свого коду з інших файлів (приклад 13.1).

Приклад 13.1. Файл index.html

У разі використання кадрів у першому рядку коду пишеться наступний тип документа.

Даний вказує браузеру, що він має справу з кадрами, цей рядок коду є обов'язковим. Контейнер містить типову інформацію на кшталт кодування сторінки та заголовка документа. Ось тільки врахуйте, що заголовок залишається незмінним, поки HTML-файли відкриваються усередині кадрів.

У даному прикладі вікно браузера розбивається на дві колонки за допомогою атрибуту cols , ліва колонка займає 100 пікселів, а права - простір, що залишився, заданий символом зірочки.Ширину або висоту кадрів можна також задавати у відсотковому відношенні, на кшталт таблиць.

У тегу задається ім'я HTML-файлу, що завантажується у вказану область за допомогою атрибута src . У ліве вікно буде завантажено файл, названий menu.html (приклад 13.2), а праве — content.html (приклад 13.3). Кожному кадру бажано задати його унікальне ім'я, щоб документи можна було завантажувати у вікно за допомогою атрибута name .

Приклад 13.2. Файл menu.html

МЕНЮ

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

Приклад 13.3. Файл content.html

ЗМІСТ

Розглянемо складніший приклад з трьома фреймами (рис. 13.2).

Мал. 13.2. Поділ сторінки на три кадри

У разі знову використовується тег , але двічі, причому один тег вкладається у інший. p align="justify"> Горизонтальне розбиття створюється через атрибут rows , де для різноманітності застосовується відсотковий запис (приклад 13.4).

Приклад 13.4. Три кадри

Як видно з даного прикладу, контейнер з атрибутом rows спочатку створює два горизонтальні кадри, але замість другого кадру підставляється ще один , який повторює вже відому вам структуру з прикладу 13.1. Щоб не з'явилася вертикальна смуга прокручування, і користувач не міг самостійно змінити розмір верхнього кадру, додані атрибути scrolling="no" та noresize .