當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS设置段落的垂直对齐

發(fā)布時間：2025/3/20 CSS 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS设置段落的垂直对齐小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

CSS設置段落的垂直對齊

? ? ? ? ? CSS設置段落的垂直對齊方式

? ? ? ? ??CSS中通過屬性vertical-align來設置段落的垂直對齊方式。

? ? ? ? ??注意，對于文字本身而言，該屬性對于塊級元素并不起作用，例如<p>和<div>等標記，但是，對于表格而言，這個屬性十分的重要。

<span style="font-size:24px;"><html><head><title>垂直對齊</title><style></style></head><body><table cellpadding="2" cellspacing="0" border="1"><tr><td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td><td class="top">垂直對齊方式，top</td></tr><tr><td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td><td class="bottom">垂直對齊方式，bottom</td></tr><tr><td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td><td class="middle">垂直對齊方式，middle</td></tr></body> </html> </span>

? ? ? ? ??如上代碼，建立了一個3行2列的表格，其中左側(cè)一列均為圖片，起到了將單元格的高度加大的作用，同時也作為對比。

? ? ? ? ??右側(cè)的一列為文字，分別采用了頂端對齊、底端對齊和中間對齊的方式，對應的CSS的值分別為top、bottom和middle。

? ? ? ? ??如果，對vertical-align屬性設置了具體的數(shù)值，對于文字本身，則可以在垂直方向上發(fā)生位移。

<span style="font-size:24px;"><html><head><title>垂直對齊</title><style></style></head><body><p>給對齊屬性設置具體<span class="zs">數(shù)值</span>，正數(shù)</p><p>給對齊屬性設置<span class="fs">具體</span>數(shù)值，負數(shù)</p></body> </html> </span>

? ? ? ? ??如上代碼，當屬性值為正數(shù)時，文字將向上移動相應的數(shù)值，設置為負數(shù)時則向下移動。

? ? ? ? ??此外，vertical屬性還有很多其他值，不過主要是適用于圖片。

總結

以上是生活随笔為你收集整理的CSS设置段落的垂直对齐的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

css
段落