HTML вирівнювання тексту по центру, ширині і відступ. Вирівнювання вмісту тегів Атрибут align мови програмування html означає

HTML теги, що визначають вирівнювання тексту, відступ

Вирівняний по ширині текст використовується в друкарні

У прикладі нижче показано, як вирівняти текст по ширині сторінки:

Значення justify забезпечує рівномірний вирівнювання тексту справа і зліва, тобто по ширині. Такий метод широко використовується у пресі.

Вирівнювання тексту в HTML по центру і по ширині

Вирівнювання тексту в HTML по центру, текст праворуч:

результат:

Атрибути і значення

• align \u003d "left" - визначає вирівнювання тексту зліва (за замовчуванням).
• align \u003d "center" - вирівнює текст по центру.
• align \u003d "right" - вирівнює текст справа.

вирівнювання | HTML відступ тексту

HTML текст і його відступ зліва сторінки

зробимо відступ тексту зліва двома способами:

результат:

Подивитися в новому вікні.

Для зображень можна вказувати їх положення щодо тексту або інших зображень на веб-сторінці. Спосіб вирівнювання зображень задається атрибутом align.

Даний атрибут застарів, натомість використовуйте стилі.

синтаксис

значення

У табл. 1 перераховані можливі значення атрибута align і результат його використання.

Значення за замовчуванням

приклад

Цей текст обтікає малюнок по його лівому краю.

браузери

У таблиці браузерів застосовуються такі позначення.

• - елемент повністю підтримується браузером;
• - елемент браузером не сприймається і ігнорується;
• - при роботі можлива поява різних помилок, або елемент підтримується з застереженнями.

Число вказує версію браузреа, починаючи з якої елемент підтримується.

Привіт, шановні читачі блогу сайт. Сьогодні ми продовжуємо вивчати і у нас на черзі властивості text-decoration, vertical-align, text-align, text-indent і ряд інших, які допомагають оформляти зовнішній вигляд текстів в Html коді.

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

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

Text-decoration, text-align, text-indent в CSS

Як же в Css працювати з текстом? Цілком логічно буде припустити, що для цієї мети існують спеціально призначені правила. Давайте почнемо з text-align, яке є фактично заміною атрибута align (він використовувався для вирівнювання вмісту, наприклад, абзаців P або заголовків).

Він має всього чотири можливих значення:

Сенс залишається таким же, як і був раніше. Text align - це горизонтальне вирівнювання рядків. Застосовується це правило виключно тільки для блокових елементів (параграфи, заголовки і т.п.), тобто тих тегах, в яких може з'явитися кілька рядків. Оскільки в малих елементах рядків може бути тільки одна, то і сенсу використання в них text-align особливого немає.

Зрозуміло, що значення цього правила означають вирівнювання, відповідно: по лівому краю (left), по правому краю (right), по центру (center) і по ширині сторінки (Justify - одночасно по лівому і правому краю за рахунок збільшення відстані між словами) . Само собою, що значення Justify варто використовувати для елементів хоча б з кількома рядками тексту, інакше видимого ефекту від цього не буде.

Для прикладу, я вирівняв попередній абзац по ширині (бачите у нього рівні кордону і зліва, і справа), використовуючи:

Text-align: justify;

За замовчуванням горизонтальне вирівнювання тексту здійснюється по лівому краю, тобто спеціально писати text-align: left не потрібно, якщо, звичайно ж, раніше ви не задавали інше вирівнювання. Цей абзац я, до речі, вирівняв по центру (center) знову ж для наочного прикладу, але тут, я думаю, все і так зрозуміло.

Наступне Css правило text-indent дозволяє задати новий рядок, наприклад, для тексту в тезі абзацу P. Відступ нового рядка можна задати за допомогою вказівки величини (як зі знаком плюс, так і зі знаком мінус, використовуючи) або за допомогою відсотків:

Від чого вважаються відсотки в text-indent? Від ширини області, яка відведена під текст. Тобто Css правило text-indent: 50% задасть новий рядок рівну половині довжини цієї самої рядки. Ну, а цей абзац якраз і є прикладом такого правила.

А можна, наприклад, визначення від'ємного значення рядка в text-indent і тоді ми отримаємо приблизно те, що ви бачите в цьому абзаці. Для досягнення даного результату я написав для тега абзацу P ось таке ось CSS правило:

Text-indent: -1em;

Ну, а звичайне використання text-indent (для завдання стандартної нового рядка) може виглядати так: text-indent: 40px; (До речі, застосоване до цього параграфу). Це правило, так само як і розглянуте раніше text-align, застосовується тільки для блокових елементів, Тобто там, де може з'явитися кілька рядків (абзаци, заголовки і т.п.).

Так, тепер давайте перейдемо до text-decoration (Оформлення за допомогою горизонтальної лінії), яке застосовується вже до всіх Html елементів (і рядковим, і блоковим).

Воно може мати лише чотири значення:

Тобто можна використовувати за допомогою text-decoration: надкресленням (overline), перекреслення (line-through) або підкреслення (underline), ну, або взагалі нічого не використовувати (none). Деякі Html елементи вже мають за замовчуванням оформлення горизонтальною лінією, наприклад, (вони за умовчанням підкреслюються).

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

Нюансом у використанні Css правила text-decoration є те, що можна буде прописати відразу три (йди два) значення для будь-якого Html елемента (опускаючи none) і в результаті ви отримаєте надчеркнуто-підкреслено-перекреслений фрагмент тексту (Прикольно звучить і виглядає, чи не так?):

Text-decoration: underline overline line-through;

Значення для text decoration (якщо ви хочете використовувати відразу декілька з них) потрібно писати через символ пробіл.

Vertical-align - вертикальне вирівнювання

Далі у нас йде вертикальне вирівнювання - vertical-align. Практично для всіх елементів в Html коді воно означає вирівнювання між собою малих елементів з текстом щодо їх базової лінії. Правда, для це означає трохи інше - вирівнюватися по вертикалі буде весь контент, який знаходиться в цих осередках.

Для Css правила vertical-align можна використовувати наступні значення:

Рядки за замовчуванням вирівнюються по базовій лінії. Ось дивіться, я застосував до цього фрагменту тексту збільшення шрифту і ці два фрагменти вирівнялися за базовою (нижньої) лінії. А вертикальне вирівнювання за допомогою vertical-align якраз і призначений саме для зміни способу вирівнювання рядків.

Наприклад, якщо я для того ж збільшеного фрагмента тексту напишу vertical-align: baseline, то ніяких змін не відбудеться, тому що значення baseline використовується для цього Css правила за замовчуванням.

До речі, в якості значень для нього можна використовувати і числа, а напис vertical-align: 0 означатиме теж саме, що і vertical-align: baseline, тобто значення baseline еквівалентно нулю. Отже, якщо ми хочемо вказати будь-якої зрушення в вертикальному вирівнюванні, то це зрушення будемо вказувати щодо базової лінії (або ж нуля).

Можна написати так:

Vertical-align: 10px;

І отримаємо зсув фрагмента зі збільшеним шрифтом вгору на 10 пікселів щодо базової лінії. Якщо напишемо від'ємне значення:

Vertical-align: -10px;

то отримаємо зсув фрагмента вниз щодо базової лінії. З прикладів видно, що через зсув збільшилася висота рядка, щоб текст містився в ній без наїзду на сусідню рядок. Зрушення можна також задавати в Em і Ex, ну, і в процентах, які будуть вважатися від висоти лінії цього елемента (пам'ятаєте в минулій статті ми навчилися її ставити за допомогою).

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

А для шрифтових елементів можна використовувати text-top, text-bottom, middle. Давайте для прикладу застосуємо до цього фрагменту тексту значення:

Vertical-align: middle;

Що вийшло в результаті? За базової лінії звичайного тексту вирівнялася середня лінія збільшеного фрагмента, тобто ми отримали вертикальне вирівнювання по середній лінії. Для text-top і text-bottom буде все аналогічно. Ось так text-top, а так text-bottom.

Значення Css властивості vertical-align sub і super відповідають під- і надиндекса, які мали місце бути в чистому Html (до використання CSS властивостей для візуального оформлення).

Text-transform, letter-spacing, word-spacing і white-space

None використовується за умовчанням і означає, що символи в тексті змінюватися ніяк не будуть - як написано в Html, так і будуть відображатися. Значення Uppercase для text-transform дозволить трансформувати усі літери фрагменту в заголовні ( приклад показаний в цьому реченні, Де використовувалося правило text-transform: uppercase, а спочатку букви були написані рядкові).

Значення lowercase для Css правила text-transform дозволить вам трансформувати все символи фрагмента в рядкові, ну, а значення capitalize зробить все перші літери слова великими ( приклад в цьому реченні - text-transform: capitalize). Тобто за допомогою text-transform можна зробити все що завгодно зі звичайним текстом, а потім запросто все повернути назад.

Тому, якщо у вас, наприклад, стоїть завдання зробити все заголовки написаними тільки великими літерами, то в Html пишіть їх зазвичай, а великими їх зробите вже в CSS через text-transform: uppercase. Потім, якщо ви вирішите щось поміняти назад, то досить внести тільки маленька зміна в стилі, а не в вміст всіх 100500 заголовків на вашому сайті.

За замовчуванням і letter-spacing, і word-spacing мають значення Normal, ну або це те ж саме, що нуль (тобто відстань між символами і словами ніяк не змінюється). Величину ж зміни відстані в цих правилах можна буде вказувати тільки в пікселах, або Em або Ex, але ніяк не в процентах.

Однак, можна використовувати як позитивні (розрідження символів або слів), так і негативні значення (зближення символів або слів). Наприклад, можна «Ось так розрідити символи в цій фразі» за допомогою наступного Css правила:

Letter-spacing: 0.4em;

Або ж можна «Ось так зблизити символи в цій фразі» за допомогою:

Letter-spacing: -1px;

Теж саме можна сказати і про word-spacing з однієї лише тільки різницею, що при цьому відстань буде змінюватися вже між словами, як, наприклад, в цій фразі, за допомогою вот такой вот CSS конструкції:

Word-spacing: 4em;

Аналогічно можна використовувати в word-spacing негативні значення для зменшення відстані між словами.

Ну, і останнє на сьогодні Css правило, яке дозволяє певним чином оформляти текст в Html коді - це white-space. Відповідає воно за відображення символів пробілів на веб сторінці, які мали місце бути при написанні Html коду.

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

Так ось, white space може приймати одне з трьох значень:

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

Ну, а значення nowrap просто заборонить браузеру переносити по тим пробільним символам, які він знайде всередині фрагмента з CSS правилом white-space: nowrap. Спробувати, як все це працює, ви зможете і самі, створивши простенький Html файлик і уклавши будь-який фрагмент тексту в подібні теги:

Удачі вам! До швидких зустрічей на сторінках блогу сайт

Вам може бути цікаво

List style (type, image, position) - Css правила для настройки зовнішнього вигляду списків в Html коді
Позиціонування за допомогою Z-index і CSS правило Cursor для зміни курсора миші
Padding, Margin і Border - задаємо в CSS внутрішні і зовнішні відступи, а так само рамкідля все сторін (top, bottom, left, right)
Для чого потрібен CSS, як підключити каскадні таблиці стилів до Html документу і основи синтаксису цієї мови
Float і clear в CSS - інструменти блокової верстки
CSS - що це таке, як таблиці каскадних стилів підключаються до Html коду за допомогою Style і Link
Одиниці розмірів (пікселі, Em і Ex) і спадкування правил в CSS
Селектори тега, класу (class), Id і універсальні, а так само селектори атрибутів в сучасному CSS
Position (absolute, relative і fixed) - способи позиціонування Html елементів в CSS (правила left, right, top і bottom)
Background в CSS (color, position, image, repeat, attachment) - все для завдання кольору фону або фонової картинки Html елементів

Атрибут align

Атрибут align, тега

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

значення

• center - Вміст вирівнюється по центру блоку
  .
• justify - Вирівнювання відразу по лівій і правій сторонах. У цьому випадку кожен рядок блоку рівномірно розподіляється по ширині, в разі необхідності між елементами або словами додаються прогалини.
• left - Вміст притискається до лівого боку блоку.
• right - Притискається до правого боку.

Значення за замовчуванням: left.

синтаксис

...

Обов'язковий атрибут: немає.

Приклад HTML: застосування атрибута align

По центру

По центру

справа

справа

Текст абзацу.

Результат. в браузері Google Chrome.

У браузері Internet Explorer.

Підтримка версіями HTML

Браузери по різному розуміють атрибут align. Google Chrome і Mozilla Firefox вирівнюють тільки самі елементи, що містяться в контейнері

. А ось Internet Explorer і Opera вирівнюють ще і вміст цих елементів.

Для зображень стандарти не визначають прийнятого за замовчуванням вирівнювання по відношенню до тексту і інших зображень в тому самому рядку - не завжди можна передбачити, як ці компоненти будуть виглядеть.1 У HTML-документах зображення зазвичай розташовані «в лінію» тільки з одним рядком тексту. Як прийнято в друкованих засобах масової інформації текст їх «обтікає», так що з зображенням можуть бути сусідами кілька рядків, а зовсім не одна.

На щастя, творці документів здатні частково управляти вирівнюванням зображень по відношенню до навколишнього тексту за допомогою атрибута align тега . Стандарти HTML і XHTML визначають п'ять значень для атрибута align: left, right, top, middle, bottom. Значення left і right змушують текст обтікати зображення, зміщене до відповідного краю. Решта три вирівнюють зображення у вертикальному напрямку по відношенню до навколишнього тексту.

Всі популярні браузери, включаючи Opera, Firefox, Netscape і Internet Explorer, погоджуються з тим, що атрибут align \u003d bottom є умовчанням вертикального вирівнювання, і однаково мають у своєму розпорядженні картинки вище самого верхнього символу в рядку тексту, див. Рис. 15.11.

У той же час браузери розходяться в думці, як розташовувати щодо тексту зображення з атрибутом align \u003d middle. На рис. 5.11 показано, що Netscape і Opera поміщають зображення, орієнтуючись на середню лінію тексту. Що стосується браузерів Internet Explorer

Мал. 5.11. Стандартне вирівнювання впроваджених зображень

Мал. 5.12. Internet Explorer і Firefox поєднують середню лінію зображення з середньою лінією найвищого елемента, а не середньою лінією тексту

і Firefox, вони мають у своєму розпорядженні зображення по середньої лінії найвищого елемента, який не обов'язково є текстовим (рис. 5.12).

Крім того, браузери в тій чи іншій мірі підтримують п'ять додаткових ознак вертикального вирівнювання зображень: texttop, center, absmiddle, baseline і absbottom (хто не здогадався про їхній зміст, підніміть руку):

Вираз align \u003d texttop наказує браузеру вирівняти верхній край зображення з верхнім краєм найвищого елемента тексту в поточному рядку. Інакше діє значення top, яке вирівнює верхній край зображення з верхнім краєм найвищого елемента, текстового компонента або зображення в поточному рядку. Якщо рядок не містить інших зображень, які виступають над текстом, texttop і top мають однаковий ефект. Opera не підтримує texttop, але інші популярні браузери інтерпретують його строго у відповідності з цим описом.

Вперше з'явившись в броузері Internet Explorer і Netscape, значення center інтерпретується в браузерах Internet Explorer, Netscape і Firefox точно так же, як і значення middle. Тільки не будемо забувати, що значення middle кожен з них розуміє по-своєму. Opera ігнорує вираз align \u003d center.

Якщо ви надасте атрибуту align тега значення absmiddle, броузер виставить абсолютну середину зображення проти абсолютної середини поточного рядка. Не так діють значення middle і center, які вирівнюють середину зображення з базовою лінією поточного рядка тексту. У той час як Netscape і Opera не проводять різниці між absmiddle і middle, Firefox і Internet Explorer використовують ці значення для виборчого вирівнювання зображень за середніми лініях. Іншими словами, Firefox і Internet Explorer сприймають ознака absmiddle так само, як Netscape сприймає middle.

Мал. 5.13. При вирівнюванні зображень з атрибутом alingn \u003d absbottom браузери приймають до уваги нижні виносні елементи

bottom і baseline (приймаються за замовчуванням)

Значення bottom і baseline мають той же ефект, як якби ви не включили атрибут вирівнювання зовсім. Броузер вирівнює нижній край зображення з базовою лінією тексту. Не слід плутати це з дією значення absbottom, яке враховує і ті частини букв, що спускаються нижче базової лініі.1 (Якщо ви все ще тримаєте руку піднятою, можете її опустити.)

Вираз align \u003d absbottom пропонує броузеру вирівняти нижній край зображення з істинним нижнім краєм тексту в поточному рядку. Істинний нижній край - це найнижча точка тексту з урахуванням всіх нижніх виносних елементів (наприклад, нижня частина символу «y»), навіть якщо таких в рядку немає. Базова лінія проходить по нижньому краю «v» у символі «y». Opera, носій стандарту, ігнорує значення absbottom, а інші популярні браузери звертаються з ним згідно з описом (рис. 5.13).

Використовуйте top і middle для поєднання піктограм, маркерів списків та інших спеціальних зображень із прилеглим текстом. В інших випадках align \u003d bottom (вибирається за замовчуванням) досягає кращого зовнішнього вигляду. Вирівнюючи одне або кілька зображень в рядку, вибирайте те значення атрибута, яке дозволить домогтися найкращого зовнішнього вигляду вашого документа.