수직 정렬 가운데 새로운 온라인

Question

나는 새 줄을 강제로 max-width 속성을 사용하고 후 작동을 멈 춥니 다. 새 줄 뒤에 텍스트는 가운데에 남기지 않고 이미지의 아래쪽으로 이동합니다.

CSS :

.description{ 
font:bold 16px Verdana, Helvetica, sans-serif; 
color: #3D85A7; 
margin: 0 auto 20px auto; 
text-align:center; 
max-width:500px; 
} 

.icon{ 
max-height: 90px; 
max-width: 85px; 
margin: 10px 0 10px 10px; 
vertical-align:middle; 
}​ 

HTML : 라이브 예를 들어

<div class="description"> 
    <img class="icon" src="http://cleanfiles.net/images/pdf.png"> 
    This is a really really really really long file name.pdf 
</div>​ 

, view it on a JSFIDDLE here.

ADDED : 또한 내 현재 CSS는 (짧은 파일 이름과 함께 사용하기에 적합합니다주의하시기 바랍니다 아이콘이 안으로 움직이며 중앙에 머물러 있습니다). 지금까지 대답은 float:이었습니다. 짧은 파일 이름에서는 제대로 작동하지 않습니다.

<div class="description"> 
    <p> 
    <img class="icon" src="http://cleanfiles.net/images/pdf.png"> 
    This is a really really really really long file name.pdf 
    </p> 
</div>​ 

을 그리고 그림을 속성 float: left을 추가

Answer 1

내 솔루션 (<p> 태그를 추가)로 HTML을 변경하는 것입니다.

편집 : 여기

가 중심 텍스트로 링크입니다 (아마 가장 좋은 방법이지만 작동) : http://jsfiddle.net/LXS6x/9/

Answer 2

당신은 정말 통제를 유지하기 위해 설명 안의 텍스트를 포장한다 텍스트

다음은 문제를 해결하기 위해 float을 구현할 수있는 방법을 jsfiddle 예입니다.

.description{ 
    font:bold 16px Verdana, Helvetica, sans-serif; 
    color: #3D85A7; 
    margin: 0 auto 20px auto; 
    text-align:center; 
    max-width:500px; 
} 

.description p { 
    display: inline-block; 
    float: right; 
    max-width: 390px; 
    margin: 10px 10px 10px 0px; 
} 

.icon{ 
    max-height: 90px; 
    max-width: 85px; 
    margin: 10px 0 10px 10px; 
    float: left; 
}​ 

CSS는 난이 도움이되기를 바랍니다.