5.24. Установка свойства text-align

Мы можете воспользоваться Свойством text-align можно воспользоваться для управления горизонтальным выравниванием текста элемента. Это свойство будет работать только в том случае, если его использовать для элемента типа block. Оно воздействует как на сам элемент, так и на дочерние элементы, которые он содержит, независимо от того, относятся ли они к типу block или inline. (Об элементах block и inline рассказывалось в разделе “Установка свойства display”.)

Свойство text-align воздействует на выравнивание текста внутри области содержимого текста. По умолчанию область содержимого текста занимает практически полную ширину окна браузера. Однако, можно модифицировать как ширину, так и положение области текста элемента (об этом будет рассказано в следующих разделах).

Свойству text-align можно назначить одно из следующих трех ключевых слов:

• left. Выравнивает каждую строку по левому краю. Используем следующее правило для XML-документа из Листинга 1.6 (в добавление к остальным правилам, содержащимся в таблице стилей из Листинга 1.5, за исключением установки свойства background-image, которая удалена):

РОЕМ {text-align: left}

Поэма будет выглядеть, как показано на следующем рисунке.

Рисунок 22. Использование значения left для свойства text-align

• right. Выравнивает каждую строку по правому краю. Так, следующее правило выравнивает текст поэмы вправо, как показано на следующем рисунке.

РОЕМ {text-align: right}

Рисунок 23. Использование значения right для свойства text-align

• center. Центрирует строки по горизонтали. Например, следующее правило центрирует весь текст поэмы, как показано на рисунке ниже.

РОЕМ {text-align: center}

Рисунок 24. Использование значения center для свойства text-align

5.25. Установка свойства text-indent

Чтобы задать отступ для первой строки текста элемента, можно воспользоваться свойством text-indent. Для данного свойства можно устанавливать все виды значений размеров. Например, следующее правило задает отступ для первой строки элемента VERSE, равный трехкратной высоте ее шрифта:

VERSE {text-indent: 3em}

Альтернативой является задание величины отступа в процентах от полной ширины текста элемента. Например, это правило задает смещение первой строки элемента VERSE на половину ширины элемента:

VERSE {text-indent:50%}

Можно задать отрицательное значение - в размерных единицах или в процентах - чтобы сдвинуть первую строку влево относительно других строк. Однако если просто присвоить отрицательное значение свойству text-indent, первая часть строки может оказаться скрытой. Чтобы избежать этого, необходимо установить для элемента левое поле. Например, следующее правило устанавливает левое поле шириной в 4еm (margin-left:4em), а затем сдвигает первую строку на 2em (text-indent:-2еm), создавая висячий отступ.

5.26. Установка свойства line-height

Свойство line-height управляет расстоянием между базовыми линиями соседних строк текста элемента. Можно воспользоваться этим свойством для разбивки строк по вертикали.

Свойству line-height можно присвоить значение, выраженное в любой из размерных единиц. Предположим, вы применили следующее правило для XML-документа из Листинга 1.6 (в дополнение к правилам, содержащимся в таблице стилей из Листинга 1.5, за исключением установки свойства background-image, которое удалено с целью облегчения восприятия):

STANZA {line-height: 2em}

Текст элемента STANZA будет иметь двойной междустрочный интервал, как показано на следующем риснуке.

Альтернативой является задание междустрочного интервала в процентах от высоты текста элемента. Например, следующее правило эквивалентно предыдущему, т.е. задает двойной междустрочный интервал:

STANZA {line-height: 200%}

Рисунок 25. Использование свойства text-indent