vertical align屬性的一些理解與認識

2021-09-26 02:40:33 字數 542 閱讀 1461

在工作上遇到這個問題,只知道vertical-align屬性設定元素的對齊方式,所以自己有必要深入理解vertical-align作用,順便整理出來。

先了解一下vertical-align一些屬性:值描述

baseline

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

sub垂直對齊文字的下標。

super

垂直對齊文字的上標

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

text-top

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

middle

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

bottom

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

text-bottom

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

length

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

inherit

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

時間不早了,明天繼續寫,先到這裡了。

解析vertical align屬性

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

vertical align各個屬性總結

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

元素的vertical align屬性

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