vertical-align指定了行級(inline-level)元素或表格單元格(table-cell)元素在line-box上的垂直對齊方式。

1.屬性值

.baseline {vertical-align: baseline;} .len {vertical-align: 20px;} .per {vertical-align: -20%;} .top {vertical-align: top;} .middle {vertical-align: middle;} .bottom {vertical-align:bottom ;} .text-top {vertical-align: text-top ;} .text-bottom {vertical-align: text-bottom;} .inherit {vertical-align: inherit;} .sub {vertical-align: sub;} .super {vertical-align: super;}

?

（1）baseline

元素的基線與line-box的基線對齊。

<div>屬性值<span class="baseline"></span>xxx屬性值值。 </div>

圖1 baseline

(2)長度值

以基線為基準，向上（正值）或向下（負值）偏移的距離。

<div>屬性值<span class="len"></span>xxx屬性值值。 </div>

圖2 長度值

（3）百分比

是按照元素的line-height的值計算基準值的，100%的移動距離等于line-height的值。

<div>屬性值<span class="per"></span>xxx屬性值值。 </div>

圖3 百分比

（4）middle

?元素的中垂線與line-box基線加字母x的1/2的高度對齊。

<div>屬性值<span class="middle"></span>xxx屬性值值。 </div>

圖4 middle

(5)top

元素的頂端與line-box頂端對齊。

<div>屬性值<span class="top"></span>xxx屬性值值。 </div>

圖5 top

(6)bottom

元素底端與line-box底端對齊。

<div>屬性值<span class="bottom"></span>xxx屬性值值。 </div>

圖6 bottom

(7)text-top

元素的頂端與line-box內容區域的頂端對齊。

<div>屬性值<span class="text-top"></span>xxx屬性值值。 </div>

圖7 text-top

(8)text-bottom

元素的底端與line-box的內容區域的底端對齊。

<div>屬性值<span class="text-bottom"></span>xxx屬性值值。 </div>

圖8 text-bottom

轉載于:https://www.cnblogs.com/fe-huahai/p/5633243.html

總結

以上是生活随笔為你收集整理的css vertical-align的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。