HTML/CSS를 사용하여 이미지 아래에서 텍스트를 정렬하는 방법은 무엇입니까?

이미지 아래 두 개의 링크를 텍스트로 정렬하려고합니다. HTML은 Chrome과 Firefox에서 완벽하지만 IE에서는 내부 사용자의 90 %가 완벽하지 않습니다. 여기 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>

크롬에서 위의 HTML이 왼쪽에있는 텍스트와 내용을 보여줍니다 .. 코드이며, 이미지가에 이미지 아래 링크 텍스트로, 오른쪽에 표시됩니다 권리.

IE에서는 링크가 먼저 왼쪽에 표시되고 텍스트는 이미지가 오른쪽에 표시됩니다 .. IE에서는 링크가 이미지 아래로 이동하지 않고 왼쪽에 있습니다. .

아이디어가 있으십니까? 내가 도대체 뭘 잘못하고있는 겁니까? IE에서 잘못된

.. 크롬에서 https://oppy.com/it/ie_broken.png
올바른 .. https://oppy.com/it/correct_chrome_only.png

출처

2014-01-22 exxoid

img와 링크를 오른쪽 부유 div와 텍스트 맞춤으로 바로 감쌀 수 있습니다. – ravb79

내가 IE 테스트 할 필요는 없지만위한 고정 폭을 설정하려고 div.

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

출처

2014-01-22 15:40:27 andi

그 속임수를 했어, 이제는 크롬에서와 마찬가지로 IE에서 정상적으로 표시됩니다 .. 감사합니다! – exxoid

a 태그 자연스럽게 inline-block 당신의 a와 같은 display: block;에 이미지 태그를 설정하려고합니다. 당신의 CSS에서 이미지를 표적으로 IE가 아니라 내가 그나마

그에게 display: block;를 추가하지만이 시도 :

JSFIDDLE

출처

2014-01-22 15:39:15 jmore009

HTML/CSS를 사용하여 이미지 아래에서 텍스트를 정렬하는 방법은 무엇입니까?

답변

관련 문제