CSS中如何使用vertical-align屬性

發(fā)布時(shí)間：2020-09-25 11:39:23 來源：億速云閱讀：225 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)CSS中如何使用vertical-align屬性的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

vertical-align是CSS中的一個(gè)屬性，可以用于設(shè)置元素的垂直對(duì)齊方式。

vertical-align屬性的用法：

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

vertical-align屬性的值比較多：

baseline：默認(rèn)。元素放置在父元素的基線上。

sub：垂直對(duì)齊文本的下標(biāo)。

super：垂直對(duì)齊文本的上標(biāo)

top：把元素的頂端與行中最高元素的頂端對(duì)齊

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

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

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

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

length：

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

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

比如：vertical-align top就是垂直對(duì)齊文本的頂部。

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

下面我們來看一個(gè)具體的示例：

<html>

<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>

<body>

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

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

</body>

</html>

運(yùn)行效果如下：

CSS中如何使用vertical-align屬性

感謝各位的閱讀！關(guān)于CSS中如何使用vertical-align屬性就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

CSS中如何使用vertical-align屬性

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽