Шаблон:Center: различия между версиями
Перейти к навигации
Перейти к поиску
(Новая страница: «<includeonly><div class="center" style="width:auto; margin-left:auto; margin-right:auto;">{{{1|}}}</div></includeonly><noinclude> {{doc|doc/left}} [[Катего…») |
мНет описания правки |
||
Строка 1: | Строка 1: | ||
<includeonly><div class="center" style="width:auto; margin-left:auto; margin-right:auto;">{{{1|}}}</div></includeonly><noinclude> | <includeonly><div class="center" style="width:auto; margin-left:auto; margin-right:auto;">{{{1|}}}</div></includeonly><noinclude> | ||
{{doc|doc | {{doc|left/doc}} | ||
[[Категория:Шаблоны:Позиционирование]]</noinclude> | [[Категория:Шаблоны:Позиционирование]]</noinclude> |
Версия от 20:06, 7 марта 2016
Документация
Выравнивание текста с помощью
Простые шаблоны без параметров {{center|...}}
, {{left|...}}
, {{rght|...}}
служат для центрирования как изображения, так и текста, которые выступают в качестве параметра. Существуют два основных вида центрирования :
- Наиболее общий и, поэтому, самый простой вид центрирования — это центрирования текста внутри ячейки таблицы
<td>...</td>
, в блоке<div>...</div>
, в абзаце<p>...</p>
или в заголовках типа<h1>...</h1>
. Для выравнивания (англ. align) текста в CSS имеется определённое свойство text-align с параметрами: left , center , right и justify , которое реализовано в шаблоне{{Text-align}}
. Если в блоке отсутствует изображение, то текст можно отцентрировать с помощью шаблона{{center}}
, иначе возникает неопределённая ситуация. - Вторая, более сложная, ситуация возникает, когда рядом с текстом присутствует изображение. При изменении масштаба шрифта или размера экрана, свободное плавающее (англ. float) пространство окна позволяет тексту плыть рядом с изображением, гибко перераспределяться, обтекая его либо слева, либо справа (понятно, что если изображение находится в центре, то текст можно разместить только снизу). Для реализации этой ситуации разработан шаблон
{{align}}
.
Разметка | Выполнит как |
---|---|
{{Left|Привет}} | Привет
|
Чтобы сделать это без шаблона, просто используйте следующий код:
<div class="left" style="width:auto; margin-left:auto; margin-right:auto;">...</div>
Выравнивание текста в таблице
С помощью left, center, right | ||
---|---|---|
{{left|Left}} |
{{center|Center}} |
{{right|Right}}
|
Left |
Center |
Right
|
С помощью align | ||
{{align|left|Left}} |
{{align|center|Center}} |
{{align|right|Right}}
|
Left |
Center |
Right
|
Выравнивание текста с помощью {{Text-align}}
Шаблон {{Text-align}}
предназначен для работы с текстом и управляет горизонтальным выравниванием текста в пределах блока. В отличии от {{align}}
умеет выравнивать абзац по ширине блока.
Формат: {{Text-align|позиция|текст}}
Параметр позиция
может принимать значения:
left
— строка выравнивается по левому краюcenter
— строка выравнивается по центруright
— строка выравнивается по правому краюjustify
— строка выравнивается по ширине блока, если её ширина больше ширины блока.start
— Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.end
— Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.match-parent
— Это значение ведёт себя так же, как inherit с различием, что значение start и end вычисляются в соответствии direction и заменяются соответствующим left или right значением.
{{text-align|left|'''Привет'''}} Привет
|
{{text-align|right|'''Привет'''}} Привет
|
{{text-align|center|'''Привет'''}} Привет
|
См. также
- {{Align}}
- {{Center}}
- {{Left}}
- {{Right}}
- {{Text-align}}
- {{Vertical-align}}