CSS快速學習6 vertical align講解

2021-07-17 04:58:48 字數 1057 閱讀 8646

vertical-align屬性設定元素的垂直對齊方式。

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

描述長度

通過距離公升高(正值)或降低(負值)元素。

'0cm'

等同於'baseline'

百分值 – %

通過距離(相對於

1line-height1

值的百分大小)公升高(正值)或降低(負值)元素。

'0%'

等同於'baseline'

baseline

預設。元素的基線與父元素的基線對齊。

sub降低元素的基線到父元素合適的下標位置。

super

公升高元素的基線到父元素合適的上標位置。

top把對齊的子元素的頂端與line box

頂端對齊。

text-top

把元素的頂端與父元素內容區域的頂端對齊。

middle

元素的中垂點與 父元素的基線加1/2

父元素中字母

x的高度 對齊。

bottom

把對齊的子元素的底端與line box

底端對齊。

text-bottom

把元素的底端與父元素內容區域的底端對齊。

inherit

採用父元素相關屬性的相同的指定值。

**示例:

說明:第一種方式,設定乙個空的

作為參照,使

的高度為

100%,

那麼設定

vertical-align

時,就會標齊

中間位置,達到居中效果。

第二種方式,不常用,用文件限制,只在html5

中有效果。設定

line-height

為容器高度,字型大小為

0,免去字型本身大小對內部空間的影響,達到絕對居中。

CSS快速入門學習二

一 外部樣式表 適用於很多頁面都需要用到樣式表時 用文字編輯器進行編輯,裡面不能包含任何html的標籤並以css為字尾儲存就是乙個樣式表檔案,如下內容hr p body需要注意的是在屬性值和單位間不要有空間,否則只有ie6有效,在mozilla firefox netscape中無效。應該用p 而不...

CSS快速入門學習一

一 css語法 h1 color blue font size 12px h1就是html的標籤,又叫選被器,是被選擇樣式化的物件,color blue 就是效果一,font size 12px 效果二 二 來個例子 p 或者這樣,更方便讀取 p放到html裡的 就是 hello world thi...

CSS學習系列6 居中對齊

對於css頁面布局來說,居中對齊很常用,在這裡我們歸納總結一下各種居中對齊的方法。1.頁面居中對齊 居中對齊乙個元素 如 可以使用margin auto,必須要設定元素的寬度,通過指定寬度,將兩邊的空外邊距平均分配,達到頁面元素居中對齊的目的。注意 如果不設定width屬性 或設定為100 居中對齊...