zxhfighter
6/18/2014 - 11:45 AM

how to use css vertical-align attribute

how to use css vertical-align attribute

vertical-align属性

简介

CSS属性vertical-align指定了display设置为inline或者table-cell(例如td)元素的垂直对齐方式。

因此,如果一个元素display为block(例如div),即使设定vertical-align,并不会使内容垂直对齐。

其初始值为baseline,语法为:

vertical-align: baseline     /* keyword values */
vertical-align: sub
vertical-align: super
vertical-align: text-top
vertical-align: text-bottom
vertical-align: middle
vertical-align: top
vertical-align: bottom
vertical-align: 10em          /* <length> values */
vertical-align: 4px
vertical-align: 20%           /* <percentage> values */
vertical-align: inherit

垂直居中

  • 如果只有一行文本需要居中,则可以设定line-height(最好height设为和line-height一致)
  • 绝对定位方式,即top: 50%; margin-top: -(height/2)px
  • 将元素display设置成table-cell,然后CSS设置vertical-align: middle
  • 如果display为inline(或者inline-block),则表现的像img的废弃的align属性,例如如果将vertical设置为bottom,则周边文字的底部和图片的底部对齐。

参考资料