Interested Article - Center

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

[ просмотр | править | история | обновить ]

Простые шаблоны без параметров {{ 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 }}`
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\|'''Hello world!'''}}` Hello world!
`{{text-align\|right\|'''Hello world!'''}}` Hello world!
`{{text-align\|center\|'''Hello world!'''}}` Hello world!