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，则周边文字的底部和图片的底部对齐。