在一行文本中垂直居中图像的最简单方法是什么？答案

【问题标题】：What's the simplest way to center an image vertically within a line of text?在一行文本中垂直居中图像的最简单方法是什么？
【发布时间】：2023-03-24 02:05:01
【问题描述】：

目前我使用：

<table cellpadding="0" cellspacing="0">
    <tr><td><a href="cv.pdf" target="_blank">
    <img src="graphics/pdf.gif" width="24" height="24" /></a></td>
    <td width="10px"></td> <!--that just spaces the image from the text-->
    <td>
        <a href="cv.pdf" target="_blank"><em>Download CV.</em></a>
    </td></tr>
</table>

相当笨重，但渲染完美。有没有更好的办法？

【问题讨论】：

使某些东西垂直居中...简单吗？希望你不要关心跨浏览器的兼容性。
@Moses — 这很容易以跨浏览器兼容的方式实现。
是的，我发表评论时没有注意到它们是表格。

标签： html html-table vertical-alignment

【解决方案1】：

在您的图像上设置以下 CSS 属性：

vertical-align: middle;

【讨论】：

【解决方案2】：

弃表，将两个anchor合二为一，去掉img标签上的width和height，去掉em标签，然后使用vertical-align来使图像居中。您还可以使用margin 在文本和图像之间添加一些空格，并使用font-style 用于斜体文本。

HTML：

<p class="cv">
    <a href="cv.pdf">
        <img src="image/source.png" /> Download CV.
    </a>
</p>

CSS：

.cv {
    font-size: 14px;
    line-height: 1.4em;
    font-family: Arial, sans-serif;
}

.cv a {
    text-decoration: none;
    color: #999;
}

.cv img {
    vertical-align: middle;
    margin-right: 10px;
}

.cv a:hover {
    color: #333;
}

看，好多了。删除width 和height 使图像显示效果更好（因为浏览器在图像插值方面很烂。如果您需要的尺寸与可用尺寸不同，您应该自己调整大小。），删除target="_blank" 会减少用户的烦恼.

在这里查看它的工作原理：http://jsfiddle.net/kZeCt/1/

【讨论】：