如何使用HTML/CSS在圖像下對齊文本？

我試圖將圖像下的兩個鏈接作爲文本對齊，我在Chrome和Firefox中獲得了完美的HTML，但是在我們90％的內部用戶不在IE中。如何使用HTML/CSS在圖像下對齊文本？

這裏是代碼..

<div style="float: right;"><img src="sites/default/files/recog.png" width="419" height="465" style="border: 6px double #7a9a01;" /><br /> 
    <p style="text-align: right;"><a href="webform/world-of-thanks">Click to Nominate Online!</a></p> 
    <p style="text-align: right;"><a href="hr/files/world-thanks-nomination-form/attachment/newest">Print your nomination form here.</a></p> 
    </div> 
    <h2>"A World of Thanks!" program</h2> 
    <p>The 「World of Thanks!」 program is a collection of...</p>

在Chrome瀏覽器上的HTML顯示在左側文字和內容，圖像會顯示在右側，與圖像的下方的文字鏈接對。

在IE瀏覽器中，鏈接第一個出現在左邊，然後將文本，圖像顯示在右邊，因爲它應該..但不知何故在IE中鏈接而不是圖像，而不是他們要離開它去下。

有什麼想法？我究竟做錯了什麼？

錯在IE .. https://oppy.com/it/ie_broken.png
正確的Chrome .. https://oppy.com/it/correct_chrome_only.png

來源

2014-01-22 exxoid

只需將img和鏈接包裝在右側浮動div中，並在該div內右對齊文本。 – ravb79

我沒有IE瀏覽器進行測試，但嘗試設置一個固定的寬度div。

<div style="float: right; width: 431px;">

來源

2014-01-22 15:40:27 andi

這樣做的伎倆，現在在IE中顯示罰款，因爲它在Chrome中..謝謝！ – exxoid

a標籤是自然inline-block試圖設置你的a到display: block;同樣的，形象的標籤。目標圖像在你的CSS，並添加display: block;到以及

我沒有IE瀏覽器，但試試這個：

JSFIDDLE

來源

2014-01-22 15:39:15 jmore009

如何使用HTML/CSS在圖像下對齊文本？

回答

相關問題