如何使用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在图像下对齐文本？

回答

相关问题