在瀏覽網頁時，經常看到一些段落他是垂直對齊的，今天這篇文章就和大家講講如何用CSS設置段落的垂直對齊，有需要的朋友可以參考一下，希望對你有所幫助。
CSS中透過屬性vertical-align來設定段落的垂直對齊方式。
注意，對於文字本身而言，該屬性對於區塊級元素並不起作用，例如
和
<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="/static/imghwm/default1.png" data-src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="lazy" border="0" alt="如何用CSS設定段落的垂直對齊（附代碼）" ></td>
<td class="top">垂直对齐方式，top</td>
</tr>
<tr>
<td><img src="/static/imghwm/default1.png" data-src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="lazy" border="0" alt="如何用CSS設定段落的垂直對齊（附代碼）" ></td>
<td class="bottom">垂直对齐方式，bottom</td>
</tr>
<tr>
<td><img src="/static/imghwm/default1.png" data-src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="lazy" border="0" alt="如何用CSS設定段落的垂直對齊（附代碼）" ></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設定段落的垂直對齊（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
瀏覽器引擎多樣性Apr 16, 2025 pm 12:02 PM當他們在2013年去Chrome時，我們失去了歌劇。與Edge今年早些時候也進行了同樣的交易。邁克·泰勒（Mike Taylor）稱這些變化為“減少
每周平台新聞：Apple部署網絡組件，漸進的HTML渲染，自託管關鍵資源Apr 16, 2025 am 11:55 AM在本週的綜述中，Apple進入Web組件，Instagram如何插入腳本以及一些思考的食物，以進行自託管關鍵資源。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
SublimeText3 Linux新版
SublimeText3 Linux最新版
Atom編輯器mac版下載
最受歡迎的的開源編輯器
SublimeText3漢化版
中文版，非常好用
