解析vertical align屬性

2021-09-01 10:18:13 字數 620 閱讀 5509

vertical-align

該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是公升高。在表單元格中,這個屬性會設定單元格框中的單元格內容的對齊方式。

即:1.只對行內元素起作用(若屬性中有display:inline-block;或float此屬性都不起作用)

2.可以定義與文字的對齊方式

3.**中內容的對齊

baseline

預設。元素放置在父元素的基線上。

sub垂直對齊文字的下標。

super

垂直對齊文字的上標

top把元素的頂端與行中最高元素的頂端對齊

text-top

把元素的頂端與父元素字型的頂端對齊

middle

把此元素放置在父元素的中部。

bottom

把元素的頂端與行中最低的元素的頂端對齊。

text-bottom

把元素的底端與父元素字型的底端對齊。

length

%使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。

inherit

規定應該從父元素繼承 vertical-align 屬性的值。

vertical align 樣式理解

文章參考 適用於 行內元素和單元格 table cell 元素 個人理解應用範圍 1 和 文字混排,使用vertical align屬性來定位 2 在table標籤中的td種使用vertical align屬性來定位 可以使用display table cell,注意該標籤父div一定是displa...

再次認識 vertical align

css中的基礎知識,上次在刷 segmentfault 遇見了乙個相關的問題有再次看過 vertical align 的描述。今天自己也遇見乙個類似的問題,再次深入學習一下。vertical align 用來指定行內元素 inline 或 單元格 table cell 元素的垂直對齊方式。無論當初起...

vertical align各個屬性總結

vertical align baseline 預設值,字母abcd的底部 text bottom 文字底部,大概會和字母g的底部 middle 整體的中部 top 整個容器的頂部 bottom 整個容器的底部 super 上標的位置 sub 下標的位置,會比textbottom低一點 super ...