如何在 html/css 中的图像旁边垂直居中文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/967022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I vertical center text next to an image in html/css?
提问by LordHits
What is the best and easiest way to vertically center text that's next to an image in html? Needs to be browser version/type agnostic. A pure html/CSS solution.
在 html 中垂直居中图像旁边的文本的最佳和最简单的方法是什么？需要与浏览器版本/类型无关。纯 html/CSS 解决方案。
回答by ajm
I always fall back on this solution. Not too hack-ish and gets the job done.
我总是依靠这个解决方案。不要太hack-ish并完成工作。
EDIT: I should point out that you might achieve the effect you want with the following code (forgive the inline styles; they should be in a separate sheet). It seems that the default alignment on an image (baseline) will cause the text to align to the baseline; setting that to middle gets things to render nicely, at least in FireFox 3.
编辑：我应该指出，您可以使用以下代码实现您想要的效果（请原谅内联样式；它们应该在单独的工作表中）。似乎图像（基线）上的默认对齐方式会导致文本与基线对齐；将它设置为中间可以让东西渲染得很好，至少在 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>回答by inkedmn
Does "pure HTML/CSS" exclude the use of tables? Because they will easily do what you want:
“纯 HTML/CSS”不排除使用表格吗？因为他们会很容易地做你想做的事：
<table>
<tr>
<td valign="top"><img src="myImage.jpg" alt="" /></td>
<td valign="middle">This is my text!</td>
</tr>
</table>
Flame me all you like, but that works (and works in old, janky browsers).
随心所欲地向我发火，但这有效（并且在旧的，笨拙的浏览器中有效）。
回答by backslash17
There are to ways: Use the attribute of the image tag align="absmiddle"or locate the image and the text in a container DIV or TD in a table and use
有方法：使用图像标签的属性align="absmiddle"或者在一个表中的容器DIV或TD中定位图像和文本并使用
style="vertical-align:middle"
回答by backslash17
That's a fun one. If you know ahead of time the height of the container of the text, you can use line-height equal to that height, and it should center the text vertically.
这是一个有趣的。如果你提前知道文本容器的高度，你可以使用等于该高度的 line-height，它应该垂直居中文本。
回答by John McCollum
There are a couple of options:
有几个选项：
- You can use line-height and make sure it is tall as the containing element
- Use display: table-cell and vertical align: middle
- 您可以使用 line-height 并确保它与包含元素一样高
- 使用显示：表格单元格和垂直对齐：中间
My preferred option would be the first one, if it's a short space, or the latter otherwise.
我的首选选择是第一个，如果它的空间很短，或者后者。
回答by evilReiko
I recommend using tables with <td valign="middle">(as inkedmnmentioned, it works in all browsers), but if you're wrapping with a link, here's how to do it (works in ugly old browsers too, like Opera 9):
我建议使用表<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>
回答by Brian
One basic way that comes to mind would be to put the item into a table and have two cells, one with the text, the other with the image, and use style="valign:center" with the tags.
想到的一种基本方法是将项目放入表格并有两个单元格，一个是文本，另一个是图像，并使用 style="valign:center" 和标签。
