[翻译]关于Vertical-Align你需要知道的事情
2015-08-24来源:易贤网

写在前面的话

开始学习前端以来,在CSS相关知识当中困扰我最多的就是Vertical-Align这个属性。在stackoverflow上查找相关问题的时候看到了这篇文章,于是将它翻译出来,作为自己的一次学习笔记吧。

正文

在遇到将元素在垂直方向上对齐的需求时,CSS提供了多种方法,有时候我用float解决,有时候我使用position:absolute解决,还有时候采用的方法是手动调整margin和padding。

其实我并不喜欢这些解决方法,float会让元素的顶端对齐而且需要手动清楚浮动。绝对定位让元素脱离了正常流,这样这些元素就不会再影响到周围的元素。在元素的padding和margin固定的情况下,一点小的改变也很有可能对布局造成影响。

接下来登场的就是本文的主角了:Vertical-align。通常来说使用这个属性进行布局是一种hack行为,因为它本来并不是被用于这个目的。它用在文本和与文本相邻元素的垂直方向上的对齐问题。然而,你也可以使用Vertical-align在不同的上下文中对元素进行灵活的,细粒度的排布。元素的尺寸无需知晓,元素任然处于正常流当中,因此元素的变化会影响到周围的元素,这使得Vertical-align是非常有价值的排布方案的选择。

Vertical-align的奇特之处

Vertical-align有时候会变的面目狰狞。它似乎有一些谜一样的规则。举例来说,有时候你改变了Vertical-align的值,但是该元素垂直方向上没有发生改变反而别的元素改变了位置。

一些资料在谈到Vertical-align这个问题的时候深入程度不够,特别是当人们想使用这个属性布局的时候。这些资料更多的将精力集中在了一个误区上,就是尝试将元素内的一切都垂直对齐。他们给出了一下在简单情况下的例子来解释Vertical-align这个属性而忽略了一些复杂奇怪的方面。

使用Vertical-align的要求

Vertical-align被用于垂直对齐inline元素,也就是display值为inline和inline-block的元素。inline-table的元素不在本文的讨论范围内。

inline元素基本上值得就是文本

inline-block元素就像它的名字一样,同时具备inline元素和block元素的特点,这样的元素有padding,margin,border,width,height。其中高度有可能是由元素的内容决定的。

inline元素一个挨着一个的摆放在行内,当行内元素太多的情况下,一个新行会被创建出来,这些行也叫做line--box。它将行内的所有内容都包裹了起来。根据行内内容的不同,line-box的尺寸也会不同,在接下来的图里面,红线代表了line-box的上下

名单

从左到右的三幅图片都是inline-block元素,不同的是,左面包含着没有脱离正常流的内容c,中间的除了没有脱离正常流的内容以外还加了overflow:hidden,右面的没有内容但是内容区还有高度。红线代表了margin-box的边界。黄色代表的是border,绿色的是padding,蓝色的是content,蓝色的线代表的还是baseline。

inline-block元素的外边缘就是margin-box的边缘。

inline-block元素的baseline的位置要看该元素有没有处于正常流之内的内容。

(1)在有处于正常流内容的情况下,inline-block元素的baseline就是最后一个作为内容存在的元素的baseline,这个元素的baseline的确定就要根据他自身来确定了。

(2)在overflow属性不为visible的情况下,baseline就是margin-box的下边界了。

(3)第三种情况下baseline还是margin-box的下边界。

line-box

名单

原因就是左面的文字根本就没有发生对齐行为,它还是对齐于line-box的baseline。而vertical-align对齐的点是baseline加上半个x的距离(half of the x-height)。因此文字的最高点超过了icon的高度。

而右面的例子,文字与icon都对齐于一个中点,文字的baseline稍微下移,位于line-box的baseline的下方。结果是很好的达到了icon与文字对齐的效果。

line-box的baseline的移动问题

这是一个Vertical-align的坑,line-box中的所有元素都会影响到baseline的位置。假设,一个元素按某种方式垂直对齐了,但是这种对齐方式会引起baseline的移动,又因为大部分的垂直对齐方式(除了top和bottom)和baseline有关,因此这个元素的垂直方向对齐的行为会引起该line-box内其他元素位置的调整。

下面还是一些例子

一个很高的元素,其高度占满了整个line-box,那么vertical-align对其实没有影响的,在它的top和bottom之外没有空间让其移动。但是为了满足它的vertical-align的值,line-box的baseline会发生移动,左面的高元素的取值为text-bottom,矮元素的取值为baseline。右面的高元素的取值为text-top,你会看到baseline跳上去了

名单

<!-- left mark-up --> <span class="tall-box text-bottom"></span> <span class="tall-box text-top"></span> <!-- mark-up in the middle --> <span class="tall-box text-bottom"></span> <span class="tall-box text-top"></span> <span class="tall-box middle"></span> <!-- right mark-up --> <span class="tall-box text-bottom"></span> <span class="tall-box text-top"></span> <span class="tall-box text-100up"></span> <style type="text/css"> .tall-box { display: inline-block; /* size, color, etc. */ } .middle { vertical-align: middle; } .text-top { vertical-align: text-top; } .text-bottom { vertical-align: text-bottom; } .text-100up { vertical-align: 100%; } </style>

inline元素下方可能会有一点空隙

下面给出一个例子,如果尝试将li元素在垂直方向上进行对齐的话在,这个现象非常常见。

名单

更多信息请查看IT技术专栏

推荐信息