vertical align的幾個注意點

2021-09-29 16:27:33 字數 1035 閱讀 7962

參考博文

1. vertical-align生效場景

2. 通過vertical-align實現居中

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

3. **結束
<

!doctype html>

"en"

>

"utf-8"

/>

"viewport" content=

"width=device-width, initial-scale=1.0"

/>

"x-ua-compatible" content=

"ie=edge"

/>

document<

/title>

div

.box

.t1

.t2

.box2

.dot

.box3

<

/style>

<

/head>

="box"

>

="t1"

>

12312312

<

/span>

="t2"

>

<

/span>

<

/div>

="box2"

>

="dot"

>

<

/span>

1231231231231

<

/div>

="box3"

>

我要居中<

/span>

<

/div>

<

/body>

<

/html>

關於vertical align的種種

有些時候vertical align的渲染結果並不同我們想象的一樣。雖然現在已經有很多 css 屬性可以完美替代vertical align的渲染效果,但有些時候碰到還是很頭疼,所以最好還是搞清楚它。作用物件 inline inline block子元素。這個屬性失效的情況 作用物件是塊級元素 因為...

元素的vertical align屬性

一,vertical algin元素的屬性值 二,vertical align只對以下元素起作用 1,inline 2,inline block 3,inline table 基本的inline元素都是標籤裹著文字。inline block元素 是在行內中的塊級元素。他們可以有寬度和高度 通常情況下...

vertical align 樣式理解

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