Шаблон:Center/doc: различия между версиями
Перейти к навигации
Перейти к поиску
Andras (обсуждение | вклад) Нет описания правки |
Andras (обсуждение | вклад) Нет описания правки |
||
| Строка 1: | Строка 1: | ||
{{Docpage}} | {{Docpage}} | ||
Простые шаблоны без параметров {{Tc| | Простые шаблоны без параметров {{Tc|Center|...}}, {{Tc|Left|...}}, {{Tc|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}}, иначе возникает неопределённая ситуация. | # Наиболее общий и, поэтому, самый простой вид центрирования — это <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}}. | # Вторая, более сложная, ситуация возникает, когда рядом с текстом присутствует изображение. При изменении масштаба шрифта или размера экрана, свободное плавающее ({{Lang-en|Float}}) пространство окна позволяет тексту плыть рядом с изображением, гибко перераспределяться, обтекая его либо слева, либо справа (понятно, что если изображение находится в центре, то текст можно разместить только снизу). Для реализации этой ситуации разработан шаблон {{Tl|Align}}. | ||
Текущая версия от 16:30, 19 мая 2023
Простые шаблоны без параметров {{Center|...}}, {{Left|...}}, {{Right|...}} служат для центрирования как изображения, так и текста, которые выступают в качестве параметра. Существуют два основных вида центрирования :
- Наиболее общий и, поэтому, самый простой вид центрирования — это центрирование текста внутри ячейки таблицы
<td></td>, в блоке<div></div>, в абзаце<p></p>или в заголовках типа<h1></h1>. Для выравнивания (англ. Align) текста в CSS имеется определённое свойство text-align с параметрами: left , center , right и justify , которое реализовано в шаблоне {{Text-align}}. Если в блоке отсутствует изображение, то текст можно отцентрировать с помощью шаблона {{Center}}, иначе возникает неопределённая ситуация. - Вторая, более сложная, ситуация возникает, когда рядом с текстом присутствует изображение. При изменении масштаба шрифта или размера экрана, свободное плавающее (англ. Float) пространство окна позволяет тексту плыть рядом с изображением, гибко перераспределяться, обтекая его либо слева, либо справа (понятно, что если изображение находится в центре, то текст можно разместить только снизу). Для реализации этой ситуации разработан шаблон {{Align}}.
| Разметка | Результат |
|---|---|
{{Center|Hello world!}}
|
Hello world! |
Чтобы сделать это без шаблона, просто используйте следующий код:
<div class="center" 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}}
|
| Шаблон:Align | Шаблон:Align | Шаблон:Align |
Выравнивание текста с помощью {{Text-align}}
Шаблон {{Text-align}} предназначен для работы с текстом и управляет горизонтальным выравниванием текста в пределах блока. В отличие от {{Align}}, умеет выравнивать абзац по ширине блока.
Формат: Шаблон:Tlx
Параметр позиция может принимать значения:
left— строка выравнивается по левому краю.center— строка выравнивается по центру.right— строка выравнивается по правому краю.justify— строка выравнивается по ширине блока, если её ширина больше ширины блока.start— аналогично значению left, если текст идёт слева направо, и right, когда текст идёт справа налево.end— аналогично значению right, если текст идёт слева направо, и left, когда текст идёт справа налево.match-parent— это значение ведёт себя так же, как inherit, с различием, что значение start и end вычисляются в соответствии с direction и заменяются соответствующим значением left или right.
{{Text-align|left|'''Hello world!'''}} |
{{Text-align|right|'''Hello world!'''}} |
{{Text-align|center|'''Hello world!'''}} |
См. также
- {{Align}}
- {{Left}}
- {{Center}}
- {{Right}}
- {{Text-align}}
- {{Vertical-align}}