今天來介紹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ì)齊。
vertical-align還可以指定為具體的值,表示把目標(biāo)元素抬升或下沉的距離。如圖,vertical-align:10px表示把元素從原位置向上抬升10像素。長度值為負(fù)時(shí)則下沉元素。
除此之外,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)鍵詞: