如何在 html/css 中的图像旁边垂直居中文本？答案

【问题标题】：How do I vertical center text next to an image in html/css?如何在 html/css 中的图像旁边垂直居中文本？
【发布时间】：2010-11-01 07:23:40
【问题描述】：

在 html 中将图像旁边的文本垂直居中的最佳和最简单的方法是什么？需要与浏览器版本/类型无关。纯 html/CSS 解决方案。

【问题讨论】：

标签： html css

【解决方案1】：

想到的一种基本方法是将项目放入一个表格中，并有两个单元格，一个带有文本，另一个带有图像，然后使用样式=“对齐：中心” 带有标签。

【讨论】：

"valign" 在 css 中不存在。您将 html valign="center" 与 style="vertical-align:middle" 混淆了

【解决方案2】：

This might get you started.

我总是依靠this solution。不是太 hack-ish 并且可以完成工作。

编辑：我应该指出，您可以使用以下代码实现您想要的效果（请原谅内联样式；它们应该在单独的工作表中）。似乎图像（基线）上的默认对齐方式会导致文本与基线对齐；至少在 FireFox 3 中，将其设置为中间可以很好地渲染。

<div>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" style="vertical-align: middle;" width="100px"/>
    <span style="vertical-align: middle;">Here is some text.</span>
</div>

【讨论】：

这行得通。谢谢。尽管对跨度上的样式属性有一个观察。如果我删除它，它似乎不会在视觉上改变任何东西（在 FF3.0.10 和 IE7 中）。那还需要吗？
是的。 CSS 中的垂直对齐与您想象的完全相反：单个元素必须在父元素中垂直对齐，而不是告诉父元素垂直对齐其所有子元素（就像我们在表格单元格中所做的那样）。跨度>
不幸的是，如果文本换行，这将不起作用。只有第一行居中，其他行在图像下方溢出（而不是全部居中，包裹在图像右侧）。 jsfiddle.net/vPpD4

【解决方案3】：

这很有趣。如果您提前知道文本容器的高度，则可以使用等于该高度的 line-height，它应该垂直居中文本。

【讨论】：

将我的span 的line-height 设置为等于它旁边的img 完美排列。

【解决方案4】：

方法有：使用图片标签的属性align="absmiddle" 或在表格中的容器 DIV 或 TD 中找到图像和文本并使用

style="vertical-align:middle"

【讨论】：

非常简单！ +5

【解决方案5】：

有几个选项：

您可以使用 line-height 并确保它与包含元素一样高
使用显示：表格单元格和垂直对齐：中间

我的首选是第一个，如果它是一个短的空间，或者是后者。

【讨论】：

【解决方案6】：

“纯 HTML/CSS”是否排除了表格的使用？因为他们很容易做你想做的事：

<table>
    <tr>
        <td valign="top"><img src="myImage.jpg" alt="" /></td>
        <td valign="middle">This is my text!</td>
    </tr>
</table>

随心所欲地给我发火，但这有效（并且适用于旧的、简陋的浏览器）。

【讨论】：

不用担心。但我将忽略基于表格的解决方案。 ;)
你不怕会喷火的 CSS 龙。
保证还没有人这么说...但是...表格是用于表格数据的
这是唯一在引导导航栏中正确工作的东西。
2021，这仍然是 HTML 电子邮件的最佳答案。（不过，我不会将此解决方案用于浏览器）

【解决方案7】：

我建议使用带有 <td valign="middle"> 的表格（正如 inkedmn 提到的，它适用于所有浏览器），但如果您使用链接包装，这里是如何做到的（适用于丑陋的旧浏览器也一样，比如 Opera 9）：

<a href="/" style="display: block; vertical-align: middle;">
    <img src="/logo.png" style="vertical-align: middle;"/>
    <span style="vertical-align: middle;">Sample text</span>
</a>

【讨论】：

【解决方案8】：

由于这个问题的大部分答案都在 2009 年和 2014 年之间（2018 年的评论除外），因此应该对此进行更新。

我找到了解决 Spongman 于 2014 年 6 月 11 日 23:20 提出的换行问题的解决方案。他在这里有一个例子：jsfiddle.net/vPpD4

如果您在 jsfiddle.net/vPpD4 示例中的 div 标签下的 CSS 中添加以下内容，您将获得我认为 Spongman 所要求的所需的换行文本效果。我不知道这适用于多远，但这适用于 Windows 计算机可用的所有当前（截至 2020 年 12 月/2021 年 1 月）浏览器。注意：我没有在 Apple Safari 浏览器上测试过。我也没有在任何移动设备上测试过。

    div img { 
        float: left;
    }
    .clearfix::after {
        content: ""; 
        clear: both;
        display: table;
    }

我还在图像周围添加了一个边框，以便读者了解图像的边缘在哪里以及为什么文本会这样换行。生成的示例看起来在这里：http://jsfiddle.net/tqg7hLzk/

【讨论】：

抱歉，CSS 部分并没有改进解决方案。对我来说，最初投票最多的问题似乎仍然是最快和最好的解决方案。