終於搞定了vertical-align：baseline對齊的問題

天晴同志發表於2018-03-05

對於行內元素，或者用設定display為inline-block的元素而言，

垂直對齊方式並不能很好的像我們想象中的那樣對齊。

進入正題：

vertical-align所有屬性值：baseline，top，middle，bottom，text-top，text-bottom

屬性的作用範圍：vertical-align只對內聯元素（或者display：inline-block的塊級元素）有效，並根據父級元素的位置定位。

  • 通俗來講就是：此屬性是為了確定此行內元素在他父級元素中的垂直距離

baseline：預設屬性，根據父級元素的基線定位，那麼父級元素的基線位置怎麼確定呢？這裡要涉及到神奇的小寫字母x，標準規定，基線的位置在小寫字母x的底部所在直線的位置，如圖，

終於搞定了vertical-align：baseline對齊的問題

圖片和xxx都屬於行內元素，可以看到他們的底部是對齊的。

<div class="div1">
    <img src="https://img.alicdn.com/bao/uploaded/i1/1780989163/TB1gFpJlf2H8KJjy0FcXXaDlFXa_!!0-item_pic.jpg_300x300q90.jpg" alt="">
    <span>xxxxxxxx</span>
</div>複製程式碼

span{
    vertical-align:baseline;
}複製程式碼

那麼基線位置在什麼情況下會改變呢？

  • 如果父級元素高度被某個子元素撐開
如果這個子元素是圖片，改變圖片的高度會改變基線的位置；
如果這個子元素是文字，改變字型的font-size和line-height屬性，都會改變基線的位置
  • 如果父級元素中包含多個含有inline-block屬性值的元素，且這些元素都設定了vertical-align：baseline屬性，那麼會出現一個好玩的現象，這一行上面所有的元素都會是一個基線，改變一個元素的基線，其他所有元素的基線都會改變。基線的位置會跟基線最低的子元素或者父級元素的基線對齊。

上面就是關於baseline值的相關問題

其他值如下的描述如下：

值
描述
sub
垂直對齊文字的下標。
super
垂直對齊文字的上標
top
把元素的頂端與行中最高元素的頂端對齊
text-top
把元素的頂端與父元素字型的頂端對齊
middle
把此元素放置在父元素的中部。
bottom
把元素的頂端與行中最低的元素的頂端對齊。
text-bottom
把元素的底端與父元素字型的底端對齊。
length

%
使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit
規定應該從父元素繼承 vertical-align 屬性的值。


相關文章