CSS 縱向?qū)R方式vertical-align

提問人：劉團圓發(fā)布時間：2020-11-18

vertical-align屬性設(shè)置元素的垂直對齊方式。

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

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

? sub:垂直對齊文本的下標(biāo)。

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

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

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

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

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

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

? length:使用line-height屬性的百分比值來排列此元素，允許使用負值。

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

【例題】設(shè)置文本的縱向?qū)R方式

代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.top{

vertical-align: top;

}

.bottom{

vertical-align: bottom;

}

.middle{

vertical-align: middle;

}

</style>

</head>

<body>

<p>這是一幅位于<img src="img/01.jpg" alt="" width="40">文本中的圖像</p>

<hr>

<div>這是一幅位于<img src="img/01.jpg" alt="" width="40">文本中的圖像</div>

<hr>

<span>這是一幅位于<img src="img/01.jpg" alt="" width="40">文本中的圖像</span>

</body>

</html>

相關(guān)視頻回答

回復(fù)(0)