Изменения
→Выравнивание текста с помощью {{tl|Text-align}}
{{docpage}}
Простые шаблоны без параметров {{tld|center|...}}, {{tld|left|...}}, {{tld|right|...}} служат для центрирования как изображения, так и текста, которые выступают в качестве параметра. Существуют два основных вида центрирования :
# Наиболее общий и, поэтому, самый простой вид центрирования — это <u>центрирование текста</u> внутри ячейки таблицы {{tag|td}}, в блоке {{tag|div}}, в абзаце {{tag|p}} или в заголовках типа {{tag|h1}}. Для выравнивания ({{lang-en|align}}) текста в [[CSS]] имеется определённое свойство '''text-align''' с параметрами: ''' left ''', ''' center ''', ''' right ''' и ''' justify ''', которое реализовано в шаблоне {{tl|Text-align}}. Если в блоке отсутствует изображение, то текст можно отцентрировать с помощью шаблона {{tl|center}}, иначе возникает неопределённая ситуация.
# Вторая, более сложная, ситуация возникает, когда рядом с текстом присутствует изображение. При изменении масштаба шрифта или размера экрана, свободное плавающее ({{lang-en|float}}) пространство окна позволяет тексту плыть рядом с изображением, гибко перераспределяться, обтекая его либо слева, либо справа (понятно, что если изображение находится в центре, то текст можно разместить только снизу). Для реализации этой ситуации разработан шаблон {{tl|align}}.
{{markup
| <nowiki>{{Center|Hello world!}}</nowiki>
| {{Center|Hello world!}}
}}
Чтобы сделать это без шаблона, просто используйте следующий код:
: {{tag|div|params=class="center" style="width:auto; margin-left:auto; margin-right:auto;"}}
== Выравнивание текста в таблице ==
{| class="wikitable"
!colspan="3" style="width:100%"|С помощью left, center, right
|-
| {{tld|left|Left}} || {{tld|center|Center}} || {{tld|right|Right}}
|-
| {{left|Left}} || {{center|Center}} || {{right|Right}}
|-
!colspan="3"| С помощью <strong>align</strong>
|-
| {{tld|align|left|Left}} || {{tld|align|center|Center}} || {{tld|align|right|Right}}
|-
| {{align|left|Left}} || {{align|center|Center}} || {{align|right|Right}}
|}
== Выравнивание текста с помощью {{tl|Text-align}} ==
Шаблон {{tl|Text-align}} предназначен для работы с '''текстом''' и управляет горизонтальным выравниванием текста в пределах блока. В отличие от {{tl|align}}, умеет выравнивать абзац по ширине блока.
'''Формат:''' {{tlx|Text-align|''позиция''|''текст''}}
Параметр <code>позиция</code> может принимать значения:
* <code>left   </code> — строка выравнивается по левому краю.
* <code>center </code> — строка выравнивается по центру.
* <code>right  </code> — строка выравнивается по правому краю.
* <code>justify</code> — строка выравнивается по ширине блока, если её ширина больше ширины блока.
* <code>start</code> — аналогично значению ''left'', если текст идёт слева направо, и ''right'', когда текст идёт справа налево.
* <code>end</code> — аналогично значению ''right'', если текст идёт слева направо, и ''left'', когда текст идёт справа налево.
* <code>match-parent</code> — это значение ведёт себя так же, как ''inherit'', с различием, что значение ''start'' и ''end'' вычисляются в соответствии с ''direction'' и заменяются соответствующим значением ''left'' или ''right''.
{| class="wikitable" width="500px"
|-
|<code><nowiki>{{text-align|left|'''Hello world!'''}}</nowiki></code><br />
{{text-align|left|'''Hello world!'''}}
|-
|<code><nowiki>{{text-align|right|'''Hello world!'''}}</nowiki></code><br />
{{text-align|right|'''Hello world!'''}}
|-
|<code><nowiki>{{text-align|center|'''Hello world!'''}}</nowiki></code><br />
{{text-align|center|'''Hello world!'''}}
|}
== См. также ==
* {{tl|Align}}
* {{tl|Left}}
* {{tl|Center}}
* {{tl|Right}}
* {{tl|Text-align}}
* {{tl|Vertical-align}}
<includeonly>
[[Категория:Шаблоны:Позиционирование]]
</includeonly>
Простые шаблоны без параметров {{tld|center|...}}, {{tld|left|...}}, {{tld|right|...}} служат для центрирования как изображения, так и текста, которые выступают в качестве параметра. Существуют два основных вида центрирования :
# Наиболее общий и, поэтому, самый простой вид центрирования — это <u>центрирование текста</u> внутри ячейки таблицы {{tag|td}}, в блоке {{tag|div}}, в абзаце {{tag|p}} или в заголовках типа {{tag|h1}}. Для выравнивания ({{lang-en|align}}) текста в [[CSS]] имеется определённое свойство '''text-align''' с параметрами: ''' left ''', ''' center ''', ''' right ''' и ''' justify ''', которое реализовано в шаблоне {{tl|Text-align}}. Если в блоке отсутствует изображение, то текст можно отцентрировать с помощью шаблона {{tl|center}}, иначе возникает неопределённая ситуация.
# Вторая, более сложная, ситуация возникает, когда рядом с текстом присутствует изображение. При изменении масштаба шрифта или размера экрана, свободное плавающее ({{lang-en|float}}) пространство окна позволяет тексту плыть рядом с изображением, гибко перераспределяться, обтекая его либо слева, либо справа (понятно, что если изображение находится в центре, то текст можно разместить только снизу). Для реализации этой ситуации разработан шаблон {{tl|align}}.
{{markup
| <nowiki>{{Center|Hello world!}}</nowiki>
| {{Center|Hello world!}}
}}
Чтобы сделать это без шаблона, просто используйте следующий код:
: {{tag|div|params=class="center" style="width:auto; margin-left:auto; margin-right:auto;"}}
== Выравнивание текста в таблице ==
{| class="wikitable"
!colspan="3" style="width:100%"|С помощью left, center, right
|-
| {{tld|left|Left}} || {{tld|center|Center}} || {{tld|right|Right}}
|-
| {{left|Left}} || {{center|Center}} || {{right|Right}}
|-
!colspan="3"| С помощью <strong>align</strong>
|-
| {{tld|align|left|Left}} || {{tld|align|center|Center}} || {{tld|align|right|Right}}
|-
| {{align|left|Left}} || {{align|center|Center}} || {{align|right|Right}}
|}
== Выравнивание текста с помощью {{tl|Text-align}} ==
Шаблон {{tl|Text-align}} предназначен для работы с '''текстом''' и управляет горизонтальным выравниванием текста в пределах блока. В отличие от {{tl|align}}, умеет выравнивать абзац по ширине блока.
'''Формат:''' {{tlx|Text-align|''позиция''|''текст''}}
Параметр <code>позиция</code> может принимать значения:
* <code>left   </code> — строка выравнивается по левому краю.
* <code>center </code> — строка выравнивается по центру.
* <code>right  </code> — строка выравнивается по правому краю.
* <code>justify</code> — строка выравнивается по ширине блока, если её ширина больше ширины блока.
* <code>start</code> — аналогично значению ''left'', если текст идёт слева направо, и ''right'', когда текст идёт справа налево.
* <code>end</code> — аналогично значению ''right'', если текст идёт слева направо, и ''left'', когда текст идёт справа налево.
* <code>match-parent</code> — это значение ведёт себя так же, как ''inherit'', с различием, что значение ''start'' и ''end'' вычисляются в соответствии с ''direction'' и заменяются соответствующим значением ''left'' или ''right''.
{| class="wikitable" width="500px"
|-
|<code><nowiki>{{text-align|left|'''Hello world!'''}}</nowiki></code><br />
{{text-align|left|'''Hello world!'''}}
|-
|<code><nowiki>{{text-align|right|'''Hello world!'''}}</nowiki></code><br />
{{text-align|right|'''Hello world!'''}}
|-
|<code><nowiki>{{text-align|center|'''Hello world!'''}}</nowiki></code><br />
{{text-align|center|'''Hello world!'''}}
|}
== См. также ==
* {{tl|Align}}
* {{tl|Left}}
* {{tl|Center}}
* {{tl|Right}}
* {{tl|Text-align}}
* {{tl|Vertical-align}}
<includeonly>
[[Категория:Шаблоны:Позиционирование]]
</includeonly>