久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

21
2023/10

CSS之vertical-align用法詳解

發(fā)布時(shí)間:2023-10-21 18:42:32
發(fā)布者:MaiMai
瀏覽量:
0

今天來介紹css中一個(gè)常用的屬性:vertical-align,vertical-align 屬性主要用來設(shè)置元素的垂直對(duì)齊方式。注意:vertical-align 屬性只能用于行內(nèi)元素和置換元素(例如 圖像和表單輸入框),此屬性不繼承。


vertical-align常用屬性值:

baseline:默認(rèn)值, 讓元素的基線與父元素文本的基線對(duì)齊。。

top:令元素的頂端對(duì)齊;

middle:元素的垂直中心點(diǎn)和行框盒子基線往上1/2x-height處對(duì)齊。

bottom:把元素的頂端與行中最低的元素的頂端對(duì)齊。

文字對(duì)齊準(zhǔn)線的圖示

vertical-align還可以指定為具體的值,表示把目標(biāo)元素抬升或下沉的距離。如圖,vertical-align:10px表示把元素從原位置向上抬升10像素。長度值為負(fù)時(shí)則下沉元素。

使用vertical屬性前

css修改

使用vertical屬性后

除此之外,vertical-align的值還可以設(shè)置為百分比。

百分?jǐn)?shù)不像vertical-align="middle”那樣對(duì)齊圖像。把vertical-align的值設(shè)為百分?jǐn)?shù),指的是把元素的基線(或置換元素的底邊)相對(duì)父元素的基線抬升或下沉指定的量(指定的百分?jǐn)?shù)相對(duì)元素自身而非父元素的line-height 計(jì)算)。正百分?jǐn)?shù)抬升元素,負(fù)百分?jǐn)?shù)下沉元素。如果百分?jǐn)?shù)的值足夠大,可能會(huì)造成樣式錯(cuò)亂,因此使用百分?jǐn)?shù)時(shí)要小心。

關(guān)鍵詞:
返回列表