曲奇饼 发表于 2019-11-27 15:27:10

css中vertical-align(垂直对齐)的使用

1.vertical-align的语法;
特别提醒:vertical-align只对行内元素有效,对块级元素无效。

语法:      vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <长度> | inherit
说明:      设置元素内容的垂直对齐方式
值:   baseline:基线对齐;sub:下标;super:上标;top:顶端对齐;text-top:与文本的顶端对齐;middle:中部对齐;bottom:底端对齐;
   text-bottom:文本的底端对齐;
百分比和长度:CSS2,可为负数。
初始值:      baseline
继承性:      不继承
适用于:      行内元素和单元格(table-cell)元素
媒体:         视觉
计算值:      百分比和长度值为绝对长度;其他同指定值

2.关于vertical-align:middle的问题;
在使用middle的时候要特别注意,要在不同浏览器中调试。

middle的时候,是该元素的中心对齐周围元素的中心。这里“中心”的定义是:图片当然就是height的一半的位置,而文字应该是基于baseline往上移动0.5ex。但是很多浏览器往往把ex这个单位定义为0.5em,以至于其实不一定是文字的正中心。

使用vertical-align文本垂直居中时可能需要调整文字居中线;


页: [1]
查看完整版本: css中vertical-align(垂直对齐)的使用