vertical-align屬性探究

在前端開發中咱們常常須要將元素垂直居中對齊，咱們很天然的想到使用vertical-align屬性，可是使用後卻發現有時候能起做用，有時候卻又不起做用。究其緣由仍是由於咱們沒有將vertical-align屬性弄清楚，今天就來分析一下這個屬性，若分析有誤，還請原諒，望一塊兒探討！

規範介紹

Value:         baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial:       baseline
Applies to:    inline-level and 'table-cell' elements
Inherited:     no
Percentages:   refer to the 'line-height' of the element itself
Media:         visual
Computed value:for <percentage> and <length> the absolute length, otherwise as specified

適用元素

該屬性僅適用於inline,inline-block,table-cell元素

屬性值介紹

介紹屬性以前先來了解一下各個屬性值表明着什麼，經過下面這張圖能夠知道

咱們知道英語本子每行有4條線，其中紅色的線即爲基線

所用demo

<div class="box">
    <span class="aa"></span>
   x
</div>

baseline

將元素的基線與父元素的基線對齊

.aa4{
    display:inline-block;
    width:5px;
    height:5px;
    background:blue;
    vertical-align: baseline;
}

x

baseline的肯定規則

1. inline-table元素的baseline是它的table第一行的baseline。
2. 父元素【line box】的baseline是最後一個inline box 的baseline。
3. inline-block元素，若是內部有line box，則inline-block元素的baseline就是最後一個做爲內容存在的元素[inline box]的baseline，而這個元素的baseline的肯定就要根據它自身來定了。
4. inline-block元素，若是其內部沒有line box或它的overflow屬性不是visible，那麼baseline將是這個inline-block元素的底margin邊界。

length

基於基線上（正值）下（負值）移動元素

input[name="sex"]{
    margin:0;
    padding:0;
    vertical-align:-2px;
}

基於基線向下移動-2px

女性 男性

percentage

基於基線上（正值）下（負值）移動元素，值經過百分比乘上line-height而得

.aa2{
    display:inline-block;
    width:5px;
    height:5px;
    background:blue;
    vertical-align: -10%;
    line-height: 30px;
}

x

這裏的vertical-align:-10%所表明的實際值是：-10% * 30 = -3px，即向基線下方移動3px
注意：若該元素沒有定義line-height,則會使用繼承的line-height值

middle

將元素的中線與父元素的基線加上字母x的高度的一半對齊

.aa3{
    display:inline-block;
    width:5px;
    height:5px;
    background:blue;
    vertical-align: middle;
}

x

text-top

將元素的頂部與父元素正文區域的頂部對齊，元素的位置受父元素font-size的大小影響

.aa5{
    display:inline-block;
    width:5px;
    height:5px;
    background:blue;
    vertical-align: text-top;
}

x

text-bottom

將元素的底部與父元素的正文區域的底部對齊，元素的位置受父元素font-size的大小影響

.aa6{
    display:inline-block;
    width:5px;
    height:5px;
    background:blue;
    vertical-align: text-bottom;
}

x

top

將元素的頂部與line box頂部對齊

.aa7{
    display:inline-block;
    width:5px;
    height:5px;
    background:blue;
    vertical-align: top;
}

x

bottom

將元素的底部與line box底部對齊

.aa8{
    display:inline-block;
    width:5px;
    height:5px;
    background:blue;
    vertical-align: bottom;
}

x

super

將元素置於基線上方合適的位置

.aa10{
    display:inline-block;
    width:5px;
    height:5px;
    background:blue;
    vertical-align: super;
}

10 2

sub

將元素置於基線下方合適的位置

.aa9{
    display:inline-block;
    width:5px;
    height:5px;
    background:blue;
    vertical-align: sub;
}

x

參考文章

• vertical-align
  
• vertical-align
  
• 我對CSS vertical-align的一些理解與認識（一）