玩儿前端--CSS垂直的那些事儿_html/css_WEB-ITnose

看CSS权威指南，觉得有价值的探究，关于行高和垂直对齐

行高

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

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

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

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

关于上图

A line box containing some text and elements.

• 一行文字被放在一个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&times;50%

  Copy after login