<span>의 텍스트를 이미지에 정렬하는 좋은 방법은 경계가 알려지지 않은 <span>입니다.

Question

<div>에는 두 가지가 있습니다. <span>. 하나는 옆에

http://chart.apis.google.com

다른 <span>에서 QR 코드의 이미지에 당기는 QR을 다운로드 할 수있는 링크 단지 텍스트입니다. 디자이너는 DOWNLOAD 링크가 이미지의 맨 아래에 맞춰질 것이라고 생각했지만 이미지에 알 수없는 경계가 있다는 것이 문제였습니다. 나는 시각적으로 올바르게하기 위해 시행 착오를 의미한다는 것을 이해합니다.

패딩과 여백을 추가하려고 시도했지만 그 다음에 모두 <span> 비트가 더 많이 전송됩니다. 시각 참조 용 빨간색 외곽선을 추가했습니다.

.qr_image { position:left; outline: 1px solid red ; } 
.qr_download { color: #1d8cd2; text-decoration: underline; outline: 1px solid red; } 

Answer 1

기본적으로 이미지는 HTML 사양의 아래쪽 테두리에있는 텍스트와 정렬됩니다.

텍스트를 바로 아래쪽에 정렬하여 이미지를 만들어야합니다. 이게 니가 원하는거야?

예를 볼 수 없으므로 이미지에 CSS 테두리가 있다고 가정합니다. 따라서

<span><img src="http://img_url" style="border: 4px solid black" /></span> 
<span>text</span> 

그러나 텍스트는 여전히 테두리가있는 이미지의 아래쪽에 정렬됩니다. 이것이 당신이 요구하는 것이 아니라면, 좀 더 구체적인 예를들 수 있습니까?