如何在html / css中的图像旁边垂直居中文本？ [英] How do I vertical center text next to an image in html/css?

问题描述

在html中的图片旁边，垂直居中文字的最佳和最简单的方法是什么？需要是浏览器版本/类型不可知。纯HTML / CSS解决方案。

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.

推荐答案

这可能会让你开始。

我总是回到此解决方案。

编辑：我应该指出，你可以通过下面的代码实现你想要的效果（原始的内联样式;他们应该在一个单独的表）。看来，图像（基线）上的默认对齐会导致文本与基线对齐;至少在FireFox 3中设置为中间可以很好地渲染。

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.

<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中的图像旁边垂直居中文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！