同行圖片與文本置中對齊的CSS

文章目錄

• 將文本與圖片中部對齊
• 將文字與圖片頂部對齊
• 將文字與圖片底部對齊

經常要將一行裡面的圖片和文本置中對齊，雖然查了很多資料走了很多彎路，從國外一家網站上看到了正確的解決方案，特放出來與大家共用。高手請無視。

將圖片對齊到文本底部——用法：

該CSS代碼將圖片的底邊與文本的底部對齊。

首先你應該按照如下格式編寫CSS樣式檔案的類（class）：

.textbottom {vertical-align:text-bottom;}

然後將該類應用到你要對齊的圖片的屬性上，例如（注意黑體部分）：

<img src="images/moreinfo.gif" width="90" height="14" border="0" class="textbottom" alt="portfolio more info tag">

這樣就可以將圖片底部與文本底部對齊。該方法的核心是以該行的文本最為基準，然後調整圖片的 CSS 樣式，使之配合文本實現需要的對齊。

其它圖片位置 CSS 舉例將文本與圖片中部對齊

如果這個效果不明顯，請開啟這個頁面看看連結前的表徵圖。

水景一頁 

樣式：.textmiddle {vertical-align:middle;}

將文字與圖片頂部對齊

水景一頁 

樣式：.texttop {vertical-align:top;}

將文字與圖片底部對齊

水景一頁 

樣式：.textbaseline {vertical-align:baseline;}

核心提示

我之所以在這麼簡單的事情上走了彎路，是因為我不懂CSS，又遇上了寫錯了的文章。這些文章大部分都說將這樣的css代碼放在要對齊的行裡。實際上應該像上面的例子那樣，將這樣的代碼放在圖片的CSS描述裡。沒錯，代碼都提到了，就是沒有說明應該放在哪兒。

怎麼說呢，這難道是因為國內就沒有CSS高手嗎？肯定不是！但是使用中文搜尋的結果，即使是排在第一的，都好像是直接從某個地方複製過來的，也許連看都沒看過。很奇怪怎麼會排在第一呢，Google也沒有把功夫做到家。