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

來源:互聯網
上載者:User
文章目錄
  • 將文本與圖片中部對齊
  • 將文字與圖片頂部對齊
  • 將文字與圖片底部對齊

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

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

該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也沒有把功夫做到家。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.