首頁 > web前端 > css教學 > vertical-align什麼意思?怎麼用 ?

vertical-align什麼意思?怎麼用 ?

不言
發布: 2019-04-12 14:29:51
原創
9324 人瀏覽過

vertical-align是CSS中的屬性,可以用來設定元素的垂直對齊方式,下面我們就來具體看一下vertical-align屬性的用法。

vertical-align什麼意思?怎麼用 ?

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

vertical-align屬性的值比較多:

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

sub:垂直對齊文字的下標。

super:垂直對齊文字的上標   

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

text-top:將元素的頂端與父元素字體的頂端對齊   

middle:將此元素放置在父元素的中間。   

bottom:將元素的頂端與行中最低的元素的頂端對齊。   

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

length:

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

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

例如:vertical-align top就是垂直對齊文字的頂部 。

在表格中,這個屬性設定單元格內容的對齊方式.vertical-align應用最多的應該是在td內,控制內部物件位置。

下面我們來看一個具體的範例:

<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" / alt="vertical-align什麼意思?怎麼用 ?" >位于段落中的图像。
</p> 

<p>
这是一幅<img  class="bottom" border="0" src="/i/eg_cute.gif" / alt="vertical-align什麼意思?怎麼用 ?" >位于段落中的图像。
</p>

</body>

</html>
登入後複製

運行效果如下:

vertical-align什麼意思?怎麼用 ?

本篇文章到這裡就已經全部結束了,更多精彩內容大家可以關注PHP中文網的CSS影片教學欄位! ! !

以上是vertical-align什麼意思?怎麼用 ?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板