溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在瀏覽網頁時，經常看到一些段落他是垂直對齊的，今天這篇文章就和大家講講如何用CSS設置段落的垂直對齊，有需要的朋友可以參考一下，希望對你有所幫助。
CSS中通過屬性vertical-align來設置段落的垂直對齊方式。
注意，對于文字本身而言，該屬性對于塊級元素并不起作用，例如<p>和<div>等標記，但是，對于表格而言，這個屬性十分的重要。
<span style="font-size:24px;"><html>
<head>
<title>
垂直對齊
</title>
<style>
<!--
td.top{vertical-align:top;}
td.bottom{vertical-align:bottom;}
td.middle{vertical-align:middle;}
-->
</style>
</head>
<body>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<td><img src="https://cache.yisu.com/upload/information/20200318/93/12653.jpg" border="0"></td>
<td class="top">垂直對齊方式，top</td>
</tr>
<tr>
<td><img src="https://cache.yisu.com/upload/information/20200318/93/12653.jpg" border="0"></td>
<td class="bottom">垂直對齊方式，bottom</td>
</tr>
<tr>
<td><img src="https://cache.yisu.com/upload/information/20200318/93/12653.jpg" border="0"></td>
<td class="middle">垂直對齊方式，middle</td>
</tr>
</body>
</html>
</span>如上代碼，建立了一個3行2列的表格，其中左側一列均為圖片，起到了將單元格的高度加大的作用，同時也作為對比。
右側的一列為文字，分別采用了頂端對齊、底端對齊和中間對齊的方式，對應的CSS的值分別為top、bottom和middle。
如果，對vertical-align屬性設置了具體的數值，對于文字本身，則可以在垂直方向上發生位移。
<span style="font-size:24px;"><html>
<head>
<title>
垂直對齊
</title>
<style>
<!--
span.zs{vertical-align:10px;}
span.fs{vertical-align:-10px;}
-->
</style>
</head>
<body>
<p>給對齊屬性設置具體<span class="zs">數值</span>，正數</p>
<p>給對齊屬性設置<span class="fs">具體</span>數值，負數</p>
</body>
</html>
</span>如上代碼，當屬性值為正數時，文字將向上移動相應的數值，設置為負數時則向下移動。
此外，vertical屬性還有很多其他值，不過主要是適用于圖片。
以上就是CSS設置段落垂直對齊的方法有哪些的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
