vertical-align的種種

原創

Mirror颜瑟

2020-06-16 05:28

有些時候 vertical-align 的渲染結果並不同我們想象的一樣。
雖然現在已經有很多 CSS 屬性可以完美替代 vertical-align 的渲染效果，但有些時候碰到還是很頭疼，所以最好還是搞清楚它。

☆作用對象：inline、inline-block子元素。
這個屬性失效的情況：

作用對象是塊級元素（因爲塊級元素會霸佔整行）；
作用元素設置了浮動、定位等脫離文本流的屬性（父元素設置這些屬性不影響）；
父元素是flex或grid佈局（作用元素設置這些佈局不影響）。

1. 屬性值

值	描述
`baseline`	(default) 元素的基線與父元素的基線對齊。
`top`	把對齊的子元素的頂端與line box頂端對齊。
`text-top`	把元素的頂端與父元素內容區域的頂端對齊(文字頂端)。
`middle`	元素的中垂點與父元素的基線加1/2父元素中字母的高度對齊。
`bottom`	把對齊的子元素的底端與 line box底端對齊。
`text-bottom`	把元素的底端與父元素內容區域的底端對齊。
`sub`	垂直對齊文本的下標。
`super`	垂直對齊文本的上標。
`inherit`	採用父元素相關屬性的相同的指定值。
長度	通過距離升高或降低元素。
%	通過相對於`line-height`屬性的百分值升高或降低元素。0值等同於`baseline`。

看錶格的描述太抽象，還不如來點兒實際的～
HTML 代碼：

<div class="container">
  Father Text
  <span class="content">
  	Child Text
  </span>
  <img class="align" src="./img/xx.png" alt="vertical align image">
  <!-- 下面的圖片不作特定垂直對齊,作爲一個參照 -->
  <img src="./img/**.png" alt="reference image">
</div>

baseline：元素放在父元素的基線上。
實際上文本子元素是文本內容放在父元素基線上。因爲這是默認值，其他子元素都是baseline。
top：元素的頂端與行中最高元素的頂端對齊。
```
.align { vertical-align: top; }
```
從baseline看，這裏的最高元素是參照圖。
text-top：元素的頂端與父元素字體的頂端對齊。
middle：元素在父元素內垂直居中。
可以看出，middle實際是指元素中部與父元素文本中部對齊。
bottom：元素底端與行中最低元素底端對齊。
從baseline可以看出這裏最低元素是 content 元素。
text-bottom：元素底端與父元素文本底端對齊。

！這和baseline是不一樣的。
長度值：使用定長表示元素底部與父元素基線的距離。
正值升高元素，負值降低元素。0值等同於baseline。
```
.align {
  vertical-allign: 10px; /* 元素相對於基線向下偏移2px */
}
```
百分比：元素底部相對於父元素基線移動相對於元素行高line-height的百分比。
這裏百分比是相對於元素的line-height值。
```
.align { vertical-align: -10%; }
```
假設.align本身未設置行高，繼承的行高是20px，這裏的-10%代表的實際值是-10% × 20 = -2px，所以是讓元素下降 2 像素。

設置.align行高爲100px，這裏的-10%代表的實際值是-10% × 100 = -10px，所以是讓元素下降 10 像素。

！IE6 / 7 下的vertical-align百分比值不支持小數的line-height。