如何使用HTML / CSS在图像下对齐文本？

Question

I am trying to align two links under an image as text, the HTML I got works perfect in Chrome and Firefox, however not in IE where 90% of our internal users are.

here is the code..

    <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>

In Chrome the above HTML shows the text and content on the left, and the image will show up on the right, with the link text underneath the image to the right.

In IE, the links show up first on the left, then the text, the image shows on the right as it should.. but somehow in IE the links are not going under the image instead they are going left of it.

Any idea? what am I doing wrong?

wrong in IE.. https://oppy.com/it/ie_broken.png
correct in Chrome.. https://oppy.com/it/correct_chrome_only.png

Answer 1

a tags are naturally inline-block trying setting your a to display: block; Same with image tags. target the image in your css and add display: block; to that as well

I dont have IE but try this:

JSFIDDLE

Answer 2

我没有要测试的IE，但请尝试为div设置一个固定的宽度。

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