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

Question

在html中垂直居中文本的最佳和最简单方法是什么？需要是浏览器版本/类型不可知.一个纯粹的html/CSS解决方案.

Answer 1

这可能会让你开始.

我总是依赖这个解决方案.不太苛刻,并完成工作.

编辑:我应该指出,您可以通过以下代码实现您想要的效果(原谅内联样式;它们应该在一个单独的表中).似乎图像(基线)上的默认对齐将导致文本与基线对齐; 将其设置为中间可以很好地呈现内容,至少在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>

Answer 2

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

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

火焰我你喜欢的所有,但它的工作原理(适用于旧的,janky浏览器).

Answer 3

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

style="vertical-align:middle"