Шаблон:Center/doc: различия между версиями
Перейти к навигации
Перейти к поиску
Andras (обсуждение | вклад) (Новая страница: «{{Docpage}} Простые шаблоны без параметров {{Tld|center|...}}, {{Tld|left|...}}, {{Tld|right|...}} служат для центрирования как изображения, так и текста, которые выступают в качестве параметра. Существуют два основных вида центрирования : # Наиболее общий и, поэтому, самый простой...») |
Andras (обсуждение | вклад) Нет описания правки |
||
Строка 1: | Строка 1: | ||
{{Docpage}} | {{Docpage}} | ||
Простые шаблоны без параметров {{ | Простые шаблоны без параметров {{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}}. | ||
Строка 18: | Строка 18: | ||
!colspan="3" style="width:100%"|С помощью left, center, right | !colspan="3" style="width:100%"|С помощью left, center, right | ||
|- | |- | ||
| {{ | | {{Tc|left|Left}} || {{Tc|center|Center}} || {{Tc|right|Right}} | ||
|- | |- | ||
| {{Left|Left}} || {{Center|Center}} || {{Right|Right}} | | {{Left|Left}} || {{Center|Center}} || {{Right|Right}} | ||
Строка 24: | Строка 24: | ||
!colspan="3"| С помощью <strong>align</strong> | !colspan="3"| С помощью <strong>align</strong> | ||
|- | |- | ||
| {{ | | {{Tc|align|left|Left}} || {{Tc|align|center|Center}} || {{Tc|align|right|Right}} | ||
|- | |- | ||
| {{Align|left|Left}} || {{Align|center|Center}} || {{Align|right|Right}} | | {{Align|left|Left}} || {{Align|center|Center}} || {{Align|right|Right}} |
Версия от 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}}