玩兒前端——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%