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

CSS

CSS设置图片的对齐

發布時間：2025/3/20 CSS 34 豆豆

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

CSS設置圖片的對齊

? ? ? ? ? 橫向對齊方式

? ? ? ? ??圖片的水平對齊方式和文字的水平對齊方式基本相同，分別是左、中、右三種方式，不同的是，圖片的水平對齊通常不能直接通過設置圖片的text-align屬性設置，而是，通過設置其父元素的該屬性來實現的。

? ? ? ? ??代碼如上，可以看到三種圖片分別在表格中以左、中、右的方式對齊，如果，直接在圖片上面設置水平對齊方式，則達不到想要的效果。

? ? ? ? ??縱向對齊方式

? ? ? ? ??圖片豎直方向上的對齊方式，主要體現在與文字搭配的情況下，尤其當圖片的高度和文字本身不一致時，在CSS中同樣通過vertical-align屬性來實現。

? ? ? ? ??屬性vertical-align的值有很多，注意，某些屬性值在IE和Firefox中顯示時是略有區別的。

<html><head><title>豎直對齊</title><style type="text/css"></style></head><body>豎直對齊<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:baseline;">方式：baseline<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:baseline;">方式豎直對齊<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:bottom;">方式：bottom<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:bottom;">方式豎直對齊<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:middle;">方式：middle<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:middle;">方式豎直對齊<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:sub;">方式：sub<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:sub;">方式豎直對齊<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:super;">方式：super<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:super;">方式豎直對齊<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:text-bottom;">方式：text-bottom<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:text-bottom;">方式豎直對齊<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:text-top;">方式：text-top<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:text-top;">方式豎直對齊<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:top;">方式：top<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:top;">方式</body> </html>

? ? ? ? ??代碼如上，當vertical-align屬性的值為Baseline時，兩幅圖片的下端都落在文字的基線上，如果給文字添加了下劃線，那就是下劃線的位置，對于其他的值，都能從顯示結果和值本身的名稱直觀的看到結果。

? ? ? ? ??當vertical-align的值為bottom或者sub時，可以看出IE和Firefox中顯示的結果不一樣，因此，這樣的屬性值不建議使用和文字的豎直對齊方式一樣，圖片的豎直對齊方式也可以用具體的數值來調整，正數和負數都可以使用。

<html><head><title>豎直對齊，具體數值</title><style type=""text/css></style></head><body>豎直對齊<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:5px;">方式：5px豎直對齊<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:-10px;">方式：-10px</body> </html>

? ? ? ? ??代碼如上，類比文字的豎直對齊方式，圖片的豎直對齊方式的效果基本相同，而且，無論圖片本身的高度是多少。

總結

以上是生活随笔為你收集整理的CSS设置图片的对齐的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

图片
css