css之vertical-align

一、vertical-align的属性

1.线类:baseline,top,middle,bottom 。2.文本类 :text-top,text-bottom。 3.上标下标类:sub,super 。 4.数值百分比类:20px,2em,20%

二、数值和百分比的差异

数值百分比类 分为数值类和百分比类,但是两种有很多共性1.都带数字。2.都支持负值(css里支持负值的并不多margin,letter-spacing,word-spacing,vertical-align)。3.行为表现一致

vertical-align默认是是baseline对齐,数值例如1px就是在baseline的基础上向上偏移1px,百分比值是相对于行高计算的 ,最后值为百分数乘以行高,但是这个IE6/IE7下vertical-align不支持小数line-height

三、vertical-align起作用的前提

(Applies to inline-level and table-cell element)

适用于

1.inline水平

inline:<span>,<strong>,<em>,未知元素,...

inline-block:<img>,<input>(IE8+),<button>(IE8+),...

2.table-cell元素

table-cell:<td>【table-cell的vertical-align只对自身起作用

默认状态下支持vertical-align的图片/按钮/文字和单元格。

1.display可以更改元素的显示水平

2.css声明可以更改元素的显示水平

四、vertical-align与line-height

{line-height:30px;vertical-align:10%}即{line-height:30px;vertical-align:3px}

相互影响导致近似垂直







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值