玩儿前端——CSS垂直的那些事儿

说说本身对行高和垂直对齐的理解

行高

line-height属性是指文本行基线之间的最小距离，而不是字体的大小

• 首先，基线(baseline)指的是英文四线格的倒数第二条线。

• 其次，关于font-size，字体大小受font-size造成的em框限制。

• 最后，在line-height设定时，由line-height决定基线间最小距离。

关于上图

<p class="line">A line <span>box</span> containing <em>some text</em> and elements.</p>

• 一行文字被放在一个line box里，而line box又由一个或多个inline box(行内框)组成，上图有5个inline box。

• inline box中的文本内容组成了content area(虚线框所示)，content area的大小跟文字大小有关，而决定文字大小的是font-size，所以font-size做用于content area。在未设置line-height的状况下，inline box的高度由content area决定。

• 而line-height则是做用于inline box高度，line-height为20px;font-size为16px;的状况下，会在content area的上下设定2px的间隔。这样上下两行基线间距离也就增长了4px

• line box的高度由inline boxs中最高的那一个决定。

• height设定的是容器的高度，并不是line box高度，若是容器高度正好与line box高度相等，那么行文本就在容器内垂直居中了。
  line-height例子

垂直对齐

vertical-align
做用于:行内元素和表单元格
默认值：baseline

• baseline: 一个元素的基线与其父元素的基线对齐。若是元素没有基线，好比这是一个图像或表单输入元素，或者是其余替换元素——那么该元素的底端与其父元素的基线对齐。

• bottom: 将元素行内框的底端与行框的底端对齐

• text-bottom: text-bottom是指行内文本的底端。替换元素或任何其余类型的非文本元素会忽略这个值。要对齐的元素的行内框底端再与父元素content area的底端对齐。

• middle: 每每（但并不老是）应用于图像。middle每每将元素的垂直中点与父元素基线上方0.25em处的一个点对齐。

• 百分数: 把元素的基线（或替换元素的底边）相对于父元素的基线升高或下降指定的量（你指定的百分数要计算为该元素line-height的百分数，而不是相对于其父元素的line-height）。

  <div style="font-size: 14px; line-height: 18px;">
  I felt that, if nothing else, I deserved a
  <span styles="vertical-align: 50%;">raise</span>for my efforts.
  </div>
  span的基线身高9px，继承自父元素的line-height×50%