vertical-align什麼意思？怎麼用 ？
- 不言原創
- 2019-04-12 14:29:519266瀏覽
vertical-align是CSS中的屬性，可以用來設定元素的垂直對齊方式，下面我們就來具體看一下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>運行效果如下：
本篇文章到這裡就已經全部結束了，更多精彩內容大家可以關注PHP中文網的CSS影片教學欄位！ ！ ！
以上是vertical-align什麼意思？怎麼用 ？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css sprites如何使用？下一篇：css sprites如何使用？