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

发布于 2024-09-19 12:42:00 字数 504 浏览 5 评论 0原文

目前我使用：

<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>

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

原文

Presently I use:

<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>

Pretty clunky but renders perfectly. Is there any better way to do it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

终陌 2024-09-26 12:42:00

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

vertical-align: middle;

Set the following CSS property on your image:

vertical-align: middle;

回复收藏 0 原文

眼中杀气 2024-09-26 12:42:00

放弃表格，将两个锚点合并为一个，删除 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/

Ditch the table, combine the two anchors into one, remove the width and height on the img tag, remove the em tag, then use vertical-align to center the image. You can also use margin to add some space between the text and the image, and font-style for the italic text.

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;
}

See, much better. Removing width and height makes images display better (because browsers suck at image interpolation. If you need a different size than is available you should do the resizing yourself.), and removing target="_blank" will cause less annoyance for your users.

See it working here: http://jsfiddle.net/kZeCt/1/

回复收藏 0 原文

~没有更多了~