vertical-align屬性

標籤：

準備階段

vertical-align取值及含義：

值	含義
baseline	預設。元素放置在父元素的基準上。
top	把元素的頂端與行中最高元素的頂端對齊
text-top	把元素的頂端與父元素字型的頂端對齊
middle	把此元素放置在父元素的中部。
text-bottom	把元素的底端與父元素字型的底端對齊。
bottom	把元素的頂端與行中最低的元素的頂端對齊。
sub	垂直對齊文本的下標。
super	垂直對齊文本的上標
%	使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
length	垂直方向上對齊，負值向下，正值向上
inherit	規定應該從父元素繼承 vertical-align 屬性的值。

注意：vertical-align屬性只對行內元素（inline/inline-block）生效。

 top/text-top/middle/baseline/text-bottom/bottom

用描述這六個屬性對應的垂直位置：

接下來進一步驗證：

測試代碼如下：

<style>    .refer {        color: #fff;        font-size: 32px;        line-height: 64px;        background: #000;        height: 100px;    }    .vertical {        font-size: 16px;        line-height: 16px;        display: inline-block;        width: 150px;        height: 20px;        border: 1px solid #fff;    }</style><div class="refer">    line-height: 64px    <span class="vertical" style="vertical-align: top">top</span>    <span class="vertical" style="vertical-align: text-top">text-top</span>    <span class="vertical" style="vertical-align: middle">middle</span>    <span class="vertical" style="vertical-align: baseline">baseline</span>    <span class="vertical" style="vertical-align: text-bottom">text-bottom</span>    <span class="vertical" style="vertical-align: bottom">bottom</span></div>

效果如下：

 從上面三個圖可以得出下面的結論：

1、top：把元素的頂端與行中最高元素的頂端對齊

2、bottm：把元素的底端與行中最低元素的底端對齊

3、text-top：把元素的頂端與父元素字型的頂端對齊

4、text-bottom：把元素的底端與父元素字型的底端對齊

5、middle：把元素放置在父元素的中部

6、baseline：元素內容的底部放置在父元素的基準上（預設值）

注意：用紅色文字標示出誰以誰為參照

super/sub

測試代碼如下：

<div>    參照物    <sup>上標</sup>    <span style="vertical-align:super">上標</span></div><div>    參照物    <sub>下標</sub>    <span style="vertical-align:sub">下標</span></div>

如下：

從可以得出結論：

1、super：元素內容的底部與父元素文字上標的底端對齊

2、sub：元素內容的底部與父元素文字下標的底端對齊

length/%

測試代碼如下：

<div>    參照物    <span style="vertical-align:10px">vertical-align:10px</span>    <span style="vertical-align:-10px">vertical-align:-10px</span></div>

 

如下：

從可以得出結論：

1、length：元素以原位置為基準，垂直方向移動，可以取正負值

2、%：元素以原位置為基準，取值以父元素的line-height屬性為基準，垂直方向移動，可以取正負值（如果父元素的line-height: 0;以"%"設定vertical-align也無效果）

 

vertical-align屬性