vertical-align | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Среда, 07.12.2016
Главная » Справочник CSS3 » Свойства текста


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


vertical-align | Свойство CSS

Свойство vertical-align устанавливает положение элемента по вертикали.




Свойство vertical-align устанавливает положение элемента по вертикали относительно своего родителя,окружающего текста или ячейки таблицы.Позволяет задать вертикальное выравнивание в виде одного из ключевых слов или в виде смещения от базовой линии.Смещение может быть задано в единицах длины или в процентах от высоты строки.Если базовая линия отсутствует, вместо нее используется нижняя граница элемента.Отрицательные значения допустимы и указывают смещение вниз.Свойство применимо к встроенным элементам и ячейкам таблиц.Создано в версии CSS1 и проходит валидацию согласно версии CSS3.




Дополнительные значения применяемые к vertical-align


Значение
Описание
baselineВыравнивает базовую линию элемента по базовой линии родителя.Если у родителя нет базовой линии тогда по нижнему краю
bottomВыравнивает нижнюю границу элемента по нижней границе родителя при этом учитывается padding-bottom родителя
middleВыравнивание средней точки элемента по центру линии родителя плюс половина высоты родительского элемента
text-bottomНижняя граница элемента выравнивается по самому нижнему краю текущей строки
text-topВерхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки
topВерхняя граница элемента выравнивается по верхней границе родителя при этом учитывается padding-top родителя
subЭлемент изображается как подстрочный,в виде нижнего регистра,размер шрифта при этом не меняется
superЭлемент изображается как надстрочный,в виде верхнего регистра,размер шрифта при этом остается прежним
<Число>Смещение в числовых единицах ( px - пиксели, in - дюймы, cm - сантиметры, pt - пункты ) относительно базовой линии родителя ( положительное значение = смещение вверх,а отрицательное = смещение вниз )
<Проценты>Смещение относительно базовой линии родителя в процентах относительно высоты родителя ( положительное значение = смещение вверх,а отрицательное = смещение вниз )
inheritНаследует значение родителя

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство vertical-align</title>
<style type="text/css">
<!--
div {
height:200px;
background:grey;
vertical-align:middle;
border:20px dotted red;
color:white;
font-size:20px;
text-align:center;
display:table-cell;
}
-->
</style>
</head>
<body>
<center>
<div>Этот текст будет находится в середине блока</div>
</center>
</body>
</html>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
Категория: Свойства текста | Добавил: IZOTOP (24.05.2012) | Автор: Меренков Михаил E W
Просмотров: 854 | Теги: вертикально, css, vertical-align, расположить, свойство, пример, style | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]