19 vertical align 屬性應用

2022-06-22 12:15:12 字數 2584 閱讀 9380

css 的 vertical-align 屬性使用場景: 經常用於設定或者表單(行內塊元素)和文字垂直對齊。

官方解釋: 用於設定乙個元素的垂直對齊方式,但是它只針對於行內元素或者行內塊元素有效。

語法:vertical-align : baseline | top | middle | bottom

、表單和文字對齊

、表單都屬於行內塊元素,預設的 vertical-align 是基線對齊。

此時可以給、表單這些行內塊元素的 vertical-align 屬性設定為 middle 就可以讓文字和垂直居中對齊了。

樣例:

doctype html

>利用vertical-align實現文字垂直居中對齊

pink老師是劉德華

<

br>

<

textarea

name

=""id

=""cols

="30"

rows

="10"

>

textarea

>

body

>

html

>

解決底部預設空白縫隙問題bug:底側會有乙個空白縫隙,原因是行內塊元素會和文字的基線對齊。

主要解決方法有兩種:

1.給新增 vertical-align:middle | top| bottom 等。 (提倡使用的)

2.把轉換為塊級元素 display: block;

樣例:

doctype html

>利用vertical-align實現文字垂直居中對齊

pink老師是劉德華

<

br>

<

textarea

name

=""id

=""cols

="30"

rows

="10"

>

textarea

>

body

>

html

>

vertical align 樣式理解

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

解析vertical align屬性

vertical align 該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是公升高。在表單元格中,這個屬性會設定單元格框中的單元格內容的對齊方式。即 1.只對行內元素起作用 若屬性中有display inline block 或float...

再次認識 vertical align

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