我如何在HTML / CSS的图像旁边垂直居中文本？
什么是最好的和最简单的方式垂直居中文本旁边的图像在HTML中？ 需要是浏览器版本/types不可知的。 一个纯粹的HTML / CSS解决scheme。
这可能会让你开始。
我总是回头看这个解决scheme 。 不是太黑客，并完成工作。
编辑：我应该指出，你可能会达到你想要的效果与下面的代码（原谅内联样式，他们应该在一个单独的表）。 似乎图像（基线）上的默认alignment将导致文本与基线alignment; 设置到中间让事情很好地呈现，至less在FireFox 3。
<div> <img src="http://stackoverflow.com/content/img/so/logo.png" style="vertical-align: middle;"/> <span style="vertical-align: middle;">Here is some text.</span> </div> “纯HTML / CSS”排除使用表吗？ 因为他们会轻松做你想做的事情：
<table> <tr> <td valign="top"><img src="myImage.jpg" alt="" /></td> <td valign="middle">This is my text!</td> </tr> </table>
火焰我所有你喜欢的，但是工作（并在旧的，janky浏览器中工作）。
有以下几种方法：使用图像标签align =“absmiddle”的属性，或者将图像和文本定位到表格中的容器DIV或TD中，并使用
style="vertical-align:middle"
这是一个有趣的。 如果提前知道文本容器的高度，则可以使用与该高度相同的行高，并且应该垂直居中文本。
有几个选项：
- 您可以使用行高，并确保它是包含的元素高
- 使用display：table-cell和vertical align：middle
我喜欢的选项是第一个，如果是空格，或者是后者。
我推荐使用带有<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>
想到的一个基本方法是将项目放在一个表格中，并有两个单元格，一个是文本，另一个是图像，标签使用style =“valign：center”。
