Вертикальное выравнивание фрагмента

При необходимости смещения по вертикали определенного элемента относительно текста применяется атрибут стиля vertical-align, принимающий значения:

· baseline – выравнивание базовой линии по соответствующей линии родительского элемента, в случае с ячейкой таблицы происходит выравнивание по базовой линии первой текстовой строки;

· bottom – выравнивание элемента по нижней части родительского элемента, в случае с ячейкой таблицы происходит выравнивание по нижнему краю;

· middle – выравнивание по центру родительского элемента, в случае с ячейкой таблицы происходит выравнивание по середине;

· sub – выравнивание базовой линии элемента по базовой линии нижнего индекса родительского элемента;

· super – выравнивание базовой линии по базовой линии верхнего индекса родительского элемента;

· text- bottom – выравнивание нижнего края фрагмента по нижнему краю текста родителя;

· text- top – выравнивание верхнего края фрагмента текста по верхнему краю текста родителя;

· top – выравнивание верхнего края фрагмента по верхнему краю текста родителя, в случае с ячейкой таблицы происходит выравнивание по верхнему краю.

Для примера добавим следующую строку к таблице стилей, созданной ранее, задающую параметры выравнивания текста в ячейках секции <tbody>:

Рис. 7.3. Результат выравнивания текста в ячейках таблицы

Разрыв строк

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

· white-space – задает способ отображения пробелов между словами (white-space: pre). Принимает следующие значения:

o normal – несколько пробелов преобразуются в один, символы перевода строк также преобразуются в пробелы, браузер самостоятельно разрывает текст и переводит его на новые строки;

o nowrap – несколько пробелов преобразуются в один, символы перевода строк также преобразуются в пробелы, браузер не осуществляет разрыв и перевод строк;

o pre – последовательность пробелов сохраняется, символы перевода строк также сохраняются, браузер самостоятельно не выполняет разрыв и перенос строк. Фактически, текст выглядит образом, определенным разработчиком, без каких - либо изменений;

o pre-line – несколько пробелов преобразуются в один, символы перевода строк сохраняются, браузер самостоятельно разрывает текст и переводит его на новые строки;

o pre-wrap – последовательность пробелов сохраняется, символы перевода строк также сохраняются, браузер самостоятельно выполняет разрыв и перенос строк;

· word-wrap – указывает места, где браузер может осуществить перевод строки (word-wrap: normal). Может принимать следующие значения:

o normal – строки разрываются только по пробелам;

o break-word – браузер может выполнять разрыв строк внутри слов.

Большинство атрибутов стилей, помимо прочих, также может принимать значение inherit, это означает, что значение атрибута будет унаследовано от значения аналогичного атрибута родительского элемента.

Не нашли, что искали? Воспользуйтесь поиском: