css - 将 中的文本与另一个具有未知边框的 中的图像对齐的好方法是什么？

Question

在 <div> 中有两个<span> .从

中提取二维码图像

http://chart.apis.google.com

其他<span>旁边只是带有下载 QR 链接的文本。设计师曾设想下载链接将对齐到图像的底部，挑战在于图像有一个未知的边框。我知道这意味着需要反复试验才能使其在视觉上正确。

我尝试添加填充和边距，但随后它同时发送了 <span>高一点。我添加了一个红色轮廓以供视觉引用

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

Answer 1

默认情况下，图像将与 HTML 规范中底部边框上的文本对齐。

<span><img src="http://img_url" /></span>
<span>text</span>

应该生成一个图像，其中一段文字位于其最右侧，底部对齐。这不是你想要的吗？

由于我看不到您的示例，我假设您是在谈论图像上的 CSS 边框？所以

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

但文本仍会与带边框的图像底部对齐。如果这不是你要问的，你能举一个更具体的例子吗？