CSS标准：vertical-align属性
发布时间：2020-03-17 04:36:24 所属栏目：编程 来源：站长网
导读：原文： 最近几天细心研究了一下vertical-align这个属性，功效让我大吃一惊，这个很资深的CSS尺度竟然在各个赏识器内里的示意都各不沟通。 vertical-align的值有点多，包罗 baseline sub supper top text-top bottom text-bottom middle以及各类长度值（%，
|
原文： 最近几天细心研究了一下vertical-align这个属性，功效让我大吃一惊，这个很“资深”的CSS尺度竟然在各个赏识器内里的示意都各不沟通。 vertical-align的值有点多，包罗 baseline sub supper top text-top bottom text-bottom middle以及各类长度值（%，em，ex等等）。我先给各人看一个我认为最浮夸的值：bottom。代码如下： p { font-size: 18px; line-height: 36px; font-family: Tahoma, sans-serif; } img { vertical-align: bottom ; } 然后各人看一看这段CSS在各个赏识器中的结果（图片是我存心做成谁人样子，为了可以看清晰相对位置）： 呃，这个功效着实很让人匪夷所思，一样平常我会以为Firefox会比IE表明得矫正确，可是看过Opera之后发明它和IE是一样的，而Safari/Win是站在Firefox何处。说真话，我不知道这是怎么回事。 细心进修了《CSS势力巨子指南（第二版）》，乃至还去查阅了 W3C ，然后本身做出一个关于vertical-align的图： 凭证W3C的界说，当内联元素的vertical-align配置为： baseline, top, bottom的时辰，都是该元素的baseline（或middle, top, bottom）对其周围元素的沟通位置，如图片的top和周围笔墨的top对齐。 text-top和text-bottom的时辰，是该元素的top（或bottom）对齐周围元素的text-top（或text-bottom）。 长度（%, em, ex)的时辰，是基于baseline往上移动，以是正数往上，负数往下。 middle的时辰，是该元素的中心对齐周围元素的中心。这里“中心”的界说是：图片虽然就是height的一半的位置，而笔墨应该是基于baseline往上移动0.5ex，亦即 小写字母“x”的正中心 。可是许多赏识器每每把ex这个单元界说为0.5em，以至于着实不必然是x的正中心（以上图为例，x的高度应该是10px，而em是18px，以是两个值纷歧样）。 可是，纵然是凭证上面的准则，各个赏识器的表明云云迥异也让我匪夷所思。我也懒得去研究为什么是这样子。总的来说呢，应该就是它们对字体的每一条线的位置的界说都不大一样，以是这个题目不光跟vertical-align有关，而跟赏识器对内联文本和内联图片的布局的表明有很大相关。 最后给各人一个测试页面，可以方面的看看各个赏识器对vertical-align差异值的表明功效。 各人可以测试一下其他的值，好比middle或是text-top，也是各个赏识器完全纷歧样。有什么心得各人来接头一下吧～～ （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读