vertical-align屬性探究
阿新 • • 發佈:2018-07-15
前端開發 cell other evel align doc value dem 有時
在前端開發中我們經常需要將元素垂直居中對齊,我們很自然的想到使用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
將元素的基線與父元素的基線對齊
x.aa4{ display:inline-block; width:5px; height:5px; background:blue; vertical-align: baseline; }
baseline的確定規則
- inline-table元素的baseline是它的table第一行的baseline。
- 父元素【line box】的baseline是最後一個inline box 的baseline。
- inline-block元素,如果內部有line box,則inline-block元素的baseline就是最後一個作為內容存在的元素[inline box]的baseline,而這個元素的baseline的確定就要根據它自身來定了。
- 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;
}
102
sub
將元素置於基線下方合適的位置
.aa9{
display:inline-block;
width:5px;
height:5px;
background:blue;
vertical-align: sub;
}
x
參考文章
- vertical-align
- vertical-align
- 我對CSS vertical-align的一些理解與認識(一)
vertical-align屬性探究