vartical align實用技巧總結

2021-09-12 17:38:38 字數 1966 閱讀 9323

vartical-align的用法非常複雜,但是非常強大,下面介紹一些實用技巧。

首先w3c官方對vartical-align屬性的定義有四個方面:

(1)vartical-align屬性用於定義「周圍的文字、inline元素、以及inline-block元素」相對於該元素基線的垂直對齊方式。這裡的該元素指的就是被定義了

vertical-align屬性的元素。

(2)在**單元格中,vertical-align屬性可以定義單元格td元素中內容的對齊方式。td元素是table-cell 元素,也就是說vertical-align屬性對table-cell型別的元素有效。

(3)vertical-align屬性對於inline元素、inline-block元素和table-cell元素有效,對塊元素無效。

(4)vertical-align屬性允許指定負長度值(如 "vertical-align:-2px"表示的是元素相對於基線向下偏移2px)

補充:基線類似於英文簿中四條線中的倒數第二條線。(上到下四條線依次是:頂線、中線、基線和底線)。

1.vertical-align屬性的取值有三種情況:負值、百分比和關鍵字。

(1)負值

如 "vertical-align:-2px"表示的是元素相對於基線向下偏移2px。此方法常用於解決單選框或核取方塊與文字垂直對齊問題。

(2)百分比

vertical-align屬性取值可以為百分比,這個百分比是相對於當前元素所繼承的line-height屬性值決定的。

例:vertical-align: 50%; ,假如當前元素所繼承的line-height為20px,

則"vertical-align: 50%「等價於"vertical-align:10px;」,其中,「vertical-align: 10px;」

表示元素相對於基線向上偏移10px。

(3)關鍵字

還有其餘屬性值可取,但在實際開發中很少使用。常用的就是這四種。

注意:vartical-align屬性用於定義「周圍的文字、inline元素、以及inline-block元素」相對於該元素基線的垂直對齊方式。這裡的該元素指的就是被定義了

vertical-align屬性的元素。(可以理解為改變的是其餘元素的對齊方式)

2.vartical-align屬性的應用

vertical-align屬性對inline元素、inline-block元素和table-cell元素有效,對於塊元素無效。

(1)inline元素和inline-block元素

在html中,常見的inline-block元素有兩個:img元素和input元素。這兩個

inline-block元素很重要,一定要記住。

(2)塊元素

vertical-align屬性對於塊元素無效。

例如想在div塊元素中實現的垂直居中,我們可以先為div定義

「display:table-cell」,(!!注意"display:inline-block"不可以,因為對於inline元素、inline-block元素而言,"vertical-align"屬性設定的是其餘元素相對於自己的位置。而對於"table-cell"元素,"vertical-align"屬性設定的是單元格中內容的對齊方式。也可以理解為將div元素整體作為乙個單元格,設定的是內容在單元格中的位置!!!一定注意!!)也就是將塊元素轉化為table-cell元素(**單元格),然後在使用"vertical-align:middle"就可以實現了。

(3)table-cell元素

w3c中定義,在**單元中,vertical-align屬性可以定義單元格中內容的對齊方式。

總結:1.inline元素和inline-bliock元素的vertical-align屬性針對的是周圍的元素來說的,vertical-align定義的是周圍元素相對於當前元素的對齊方式。

2.table-cell元素的vertical-align屬性針對的是自身而言的。vertical-align屬性定義的是內部子元素相對於自身的對齊方式。

python教程是否實用 Python 實用入門篇

python內建序列型別之集合型別詳解 1.集合概念 具有某種特定性質的事物的總體,集合裡的東西叫作元素。python中,集合 set 是乙個無序不重複元素的序列。2.集合的建立 可以使用大括號 或者 set 函式建立集合,注意 建立乙個空集合必須用set 而不是 因為 是用來建立乙個空字典。第一種...

python實用寶典 python 5個實用的技巧

下面我挑選出的這幾個技巧常常會被人們忽略,但它們在日常程式設計中能真正的給我們帶來不少幫助。1.字典推導 dictionary comprehensions 和集合推導 set comprehensions 大多數的python程式設計師都知道且使用過列表推導 list comprehensions...

python實用教程 Python語言實用教程

出版說明 前言第1章 python概述 1.1 程式語言簡介 1.2 python語言簡介 1.2.1 python發展歷史 1.2.2 python特點 1.2.3 python應用場合 1.3 安裝python 1.3.2 unix和linux平台安裝python 1.3.3 在windows平...