Шаблон:Center: различия между версиями

Материал из Ганджавики
Перейти к навигации Перейти к поиску
(Новая страница: «<includeonly><div class="center" style="width:auto; margin-left:auto; margin-right:auto;">{{{1|}}}</div></includeonly><noinclude> {{doc|doc/left}} [[Катего…»)
 
м (2 версии импортировано)
 
(не показана 1 промежуточная версия этого же участника)
Строка 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/left}}
{{doc|left/doc}}
[[Категория:Шаблоны:Позиционирование]]</noinclude>
[[Категория:Шаблоны:Позиционирование]]</noinclude>

Текущая версия от 20:57, 16 апреля 2016

(i) Документация

Простые шаблоны без параметров {{center|...}}, {{left|...}}, {{rght|...}} служат для центри­ро­ва­ния как изображения, так и текста, которые выступают в качестве параметра. Существуют два основных вида центри­ро­ва­ния :

  1. Наиболее общий и, поэтому, самый простой вид центрирования — это центрирования текста внутри ячейки таблицы <td>...</td>, в блоке <div>...</div>, в абзаце <p>...</p> или в заголовках типа <h1>...</h1>. Для выравнивания (англ. align) текста в CSS имеется определённое свойство text-align с параметрами: left , center , right и justify , которое реализовано в шаблоне {{Text-align}}. Если в блоке отсутствует изображение, то текст можно отцентрировать с помощью шаблона {{center}}, иначе возникает неопределённая ситуация.
  2. Вторая, более сложная, ситуация возникает, когда рядом с текстом присутствует изображение. При изменении масштаба шрифта или размера экрана, свободное плавающее (англ. 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|'''Привет'''}}
Привет

См. также