css中vertical-align是什么意思

發(fā)布時間：2022-03-16 11:01:00 來源：億速云閱讀：460 作者：小新欄目：web開發(fā)

小編給大家分享一下css中vertical-align是什么意思，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

　　vertical-align屬性的值比較多：

　　baseline：默認。元素放置在父元素的基線上。

　　sub：垂直對齊文本的下標。

　　super：垂直對齊文本的上標

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

　　text-top：把元素的頂端與父元素字體的頂端對齊

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

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

　　text-bottom：把元素的底端與父元素字體的底端對齊。

　　length：

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

　　inherit：規(guī)定應(yīng)該從父元素繼承vertical-align屬性的值。

　　比如：vertical-aligntop就是垂直對齊文本的頂部。

　　在表格中，這個屬性設(shè)置單元格內(nèi)容的對齊方式.vertical-align應(yīng)用最多的應(yīng)該是在td內(nèi)，控制內(nèi)部對象位置。

　　下面我們來看一個具體的示例：

　　<html>

　　<head>

　　<styletype="text/css">

　　img.top{vertical-align:text-top}

　　img.bottom{vertical-align:text-bottom}

　　</style>

　　</head>

　　<body>

　　<p>

　　這是一幅<imgclass="top"border="0"src="/i/eg_cute.gif"/>位于段落中的圖像。

　　</p>

　　<p>

　　這是一幅<imgclass="bottom"border="0"src="/i/eg_cute.gif"/>位于段落中的圖像。

　　</p>

　　</body>

　　</html>

以上是“css中vertical-align是什么意思”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

猜你喜歡