Четверг, 20 Декабря 2012 08:59

Свойство vertical-align

Written by 
Оцени эту запись
(0 Голоса)

Свойство vertical-align задает вертикальное выравнивание элемента относительно его родителя.

 

Свойство vertical-align

Возможные значения свойства vertical-align:

 

 

  • baseline - выравнивает элемент по базовой линии родительского
  • bottom - выравнивает элемент по нижней части элемента строки, расположенной ниже всех
  • middle - выравнивает элемент по половине высоты родителя
  • sub - выводит элемент в виде нижнего индекса
  • supper - выводит элемент в виде верхнего индекса
  • text-bottom - выравнивает элемент по самой нижней части текущей строки
  • text-top - выравнивает элемент по самой высокой части текущей строки
  • top - выравнивает по верхней части элемента строки, располдоженного ниже всех
  • значение в пикселах - положительное значение приподнимает вверх от базовой линии родителя, отрицательное - опускает
  • значение в процентах - смещает также относительно базовой линии, но зависит от свойства line-height

 

Давайте рассмотрим примеры применения свойства vertical-align:

 

<div style="height: 50px; line-height: 50px;">На страницах <span style="vertical-align: top">Kate-Land</span> вы <span style="vertical-align: bottom">можете</span> найти много <span style="vertical-align: 10px">полезной информации</span> по <span style="vertical-align: sub">HTML</span>и <span style="vertical-align: supper">CSS</span></div>

 

 

На страницах Kate-Land вы можете найти много полезной информации по HTMLи CSS

 

 

Если мы будем менять значение смещения в пикселах, то будут меняться значения top (в положительном случае) и bottom (в отрицательном).

 

 

vertical-align: 30px:

 

 

На страницах Kate-Land вы можете найти много полезной информации по HTMLи CSS

 

 

vertical-align: -20px:

 

 

На страницах Kate-Land вы можете найти много полезной информации по HTMLи CSS

 

 

На расположения также влияет размер текста, что можно увидеть в следующих двух примерах:

 

 

На страницах Kate-Land вы можете найти много полезной информации по HTMLи CSS

 

 

На страницах Kate-Land вы можете найти много полезной информации по HTMLи CSS

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов