Vertical-Align的理解

Vertical-Align

这是一个非常困扰人的属性。
CSS对于将元素在垂直方向上对齐提供了很多方法。

取值：

用float解决：

让元素的顶端对齐而且需要手动清除浮动。 float只能是让顶端对齐了。

用postion:absolute解决

绝对定位让元素脱离了正常的文档流，这些元素不会再影响周围的元素。 在元素的padding marin固定的情况下，一点小的改变都很有可能对布局造成影响。

vertical-align解决布局问题

使用这个属性进行布局是一种hack行为， 因为它本来不是用于这个目的的。 它用在文本和 与文本相邻元素的垂直方向上对齐问题！
你可以使用这个属性在不同上下文中对元素进行灵活的，细粒度的排布。 元素的尺寸无需知道，元素处理normal flow中。 因此元素的变化会影响到周围的元素，使得vertical-align 是非常有价值的排布方案的选择。

vertical-align的奇特之处

Vertical-align有时候会变的面目狰狞。它似乎有一些谜一样的规则。举例来说，有时候你改变了Vertical-align的值，但是该元素垂直方向上没有发生改变反而别的元素改变了位置。
一些资料在谈到Vertical-align这个问题的时候深入程度不够，特别是当人们想使用这个属性布局的时候。这些资料更多的将精力集中在了一个误区上，就是尝试将元素内的一切都垂直对齐。他们给出了一下在简单情况下的例子来解释Vertical-align这个属性而忽略了一些复杂奇怪的方面。

使用Vertical-align的要求

用于inline 行内元素 或者 inline-block元素。
对于inline元素 有两种：替换元素和非替换元素
一般行内非替换元素就是指文本了。
inline-block元素 具有padding margin border width height。其中高度可能是由元素的内容决定。

行框
每个行内元素是一个挨着一个的摆放在行内，但行内元素太多的情况下，一个新行就会被创建出来，这里就有个 line-box的概念。 它把所有内容都包裹了起来。根据行内内容不同，line-box的尺寸也会不同。

这行框内，Vertical-align属性负责对齐一些独立的元素。 那么这些元素是要和谁对齐呢？

---

关于边界和baseline

关于垂直对齐这个知识点来说，最重要就是涉及元素的baseline。 有时候元素的盒模型的上下边界也会变得很重要。 下面上图

如图有三行文字。 行高的上下边界是红线。文字的上下边界是绿色线。而蓝色的线就是baseline。
左边文字的高度与行高一致的，因此绿线和红线重合了，中间的行高是文字大小的两倍，右边行高是文字大小的1/2。
行内元素的外边界在行高的上边缘和下边缘这个范围内对齐，如果行高小于文字的高度也无所谓。

inline-block元素

从左到右的三幅图片都是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行框

行框的上边界是： 最高元素的上边界，下边界是最低元素的下边界！
W3C标准没有定义line-box的baseline的位置，这一点让人困惑!
原因之一：baseline的位置需要满足 vertical-align属性的值以及让line-box的高度最小等条件，是一个灵活参数。
行框的baseline是不可见的。
可视化的方法：在行的开头添加一个字母，比如’X’，这个字母的下边界默认就是baseline位置。也就是说，围绕着baseline在行框中形成了文字盒(text box)。 文字盒仅仅包含非格式化的line-box的文本，文字盒的边界是上图中的绿线。一般来说它的高度与他的父元素的font-size相同。
因为文字盒是紧紧挨着baseline的，如果baseline的位置发生变化，文字盒(strut)的位置也会变化。

• 有一个区域叫行框(line-box)，垂直方向上的对齐都是发生在这个区域里面的，它有baseline，有文字盒，有上下边界。
• inline元素也有baseline和上下边界，inline元素是需要对齐的对象。

BTW ,一个有趣的事情值得谨记：
使用百分数的时候：
- vertical-align的值是相对于line-height的值来取的。 比如line-height:15px; vertial-align:10%; 就是 15*10%
- 而对于line-height却是相对于Font-Size来取的。 同上。

---

Vertical-align属性的值

这是Vertical-align 几个取值的效果。

这个属性到底怎么起作用？
我想对齐一个icon和文字。 仅仅使icon的vertial-align设置为middle不能让人满意。

<!-- left mark-up -->
<span class="icon middle"></span>
Centered?

<!-- right mark-up -->
<span class="icon middle"></span>
<span class="middle">Centered!</span>

<style type="text/css">
  .icon   { display: inline-block;
            /* size, color, etc. */ }

  .middle { vertical-align: middle; }
</style>

下面给出上图的辅助线版本

原因是左面的文字根本就没有发生过对齐行为，它还是对齐与行框的baseline。 而Vertical-align对齐的点时baseline加上 半个x的距离(half of the x-height)。 因此文字最高点高出了icon的高度。
而右面是，对齐于一个中点，文字的baseline下移了，位于行框的baseline下方。 结果很好达到了icon和文字对齐的效果！

---

行框的baseline的移动问题

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

下面还是一些例子：
一个很高的元素，高度占满了整个line-box，那么vertical-align对它其实没有影响的，在它的top和bottom之外没有空间让其移动。
但是为了满足它的vertical-align的值，行框的baseline就会发生移动,

• 左边的高元素取值为 text-bottom(绿线)
  矮元素取值为baseline(蓝线)
• 右边的高元素取值为text-top(绿色)
  矮元素的取值为baseline(baseline跳上来了)

text-top：将元素行内框的顶端与父元素内容区的顶端对齐。
text-bottom:将元素行内框的底端与父元素内容区的底端对齐。

top：将元素行内框的顶端与包含该元素的行框的顶端对齐
bottom：将元素行内框的底端与包含该元素的行框的底端对齐

<!-- left mark-up -->
<span class="tall-box text-bottom"></span>
<span class="short-box"></span>

<!-- right mark-up -->
<span class="tall-box text-top"></span>
<span class="short-box"></span>

<style type="text/css">
  .tall-box,
  .short-box   { display: inline-block;
                /* size, color, etc. */ }

  .text-bottom { vertical-align: text-bottom; }
  .text-top    { vertical-align: text-top; }
</style>

---

如果把高元素的vertical-align设置为其他值，也能看到类似的行为。
甚至将vertical-align设置为bottom或者是top也会让baseline发生移动。这很奇怪，因为这时候应该就没baseline什么事儿了。

<!-- left mark-up -->
<span class="tall-box bottom"></span>
<span class="short-box"></span>

<!-- right mark-up -->
<span class="tall-box top"></span>
<span class="short-box"></span>

<style type="text/css">
  .tall-box,
  .short-box { display: inline-block;
               /* size, color, etc. */ }

  .bottom    { vertical-align: bottom; }
  .top       { vertical-align: top; }
</style>

---

将两个更大的元素放在一个line里面，并且设置vertical-align的值让line-box的baseline移动。在满足vertical-align数值对齐的条件下，line-box的高度会自我调整，如左面的图。再增加第三个元素，第三个元素如果因为其vertical-align的设置不会超过line-box的边缘的话，它是不会影响到line-box的高度和baseline的位置的，如果它会超过line-box的边缘，那么line-box的高度和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元素在垂直方向上进行对齐的话在，这个现象非常常见

<ul>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>



<style type="text/css">
  .box { display: inline-block;
         /* size, color, etc. */ }
</style>

正如你所见，li元素是对齐baseline的，baseline的下方会给字母的一部分留出空间，因此会产生一个空隙。解决方案就是改变line-box的baseline的位置，比如将这些li这是为vertical-align:middle

<ul>
  <li class="box middle"></li>
  <li class="box middle"></li>
  <li class="box middle"></li>
</ul>



<style type="text/css">
  .box    { display: inline-block;
            /* size, color, etc. */ }

  .middle { vertical-align: middle; }
</style>

inline元素之间的空隙造成布局效果与理想状态发生偏差
这主要是因为inline元素本身的原因，但是因为如果要让vertical-align的值产生作用的话，inline元素是必备要求，因此了解一点也不错嘛
这个空隙来源于inline元素之间的空格，所有的inline元素之间的空白都会变成一个空格。如果你想让inline元素在水平上紧挨着，设置它们的宽度是不行的。因为之间存在空隙，所以行的宽度不够放下两个inline元素。一行会被破坏为两行。解决方案如下图的右侧

<!-- left mark-up -->


<div class="half">50% wide</div>




<div class="half">50% wide... and in next line</div>


<!-- right mark-up -->


<div class="half">50% wide</div>

<!--
-->

<div class="half">50% wide</div>


<style type="text/css">
  .half { display: inline-block;
          width: 50%; }
</style>

---

总结和注意：

行框line-box的高度
定义是行内框的最高点和最低点的最小框。
行框的上边界位于最高行内框的上边界，底边放在最低行内框的下边界。

所以说，line-box行框的具体高度要取决于组成元素相互之间如何对齐~ vertical-align！
这种对齐往往很大程度上依赖于基线落在各元素中的哪个位置！ (匿名文本也有他的基线)，因为这个位置确定了其行内框如何摆放。

行内框
inline-box 的高度， 就是line-height决定的，这个行高设置的是行内框的高度而已。它是对应一个元素而言的。 而行框是对应这一行的若干个元素而言的！！！！！

补充vertical-align:middle
仅仅与其父元素有关。 跟文本框无关。
也就是说 vertical-align是个独立的个体，与后面的line水平的元素没有必然的联系。
无论它是什么都不影响文字在box中的位置。但是对齐的方式的不同，会影响元素本身的baseline~ 这个却是需要注意的。