如何在html/css中将文本放在图像旁边？
如何在html/css中将文本放在图像旁边？
提问于 2009-06-08 21:04:53
什么是最好的和最简单的方法来垂直居中的文本旁边的图像在html？需要浏览器版本/类型不可知。一个纯html/CSS解决方案。
回答 5
Stack Overflow用户
回答已采纳
发布于 2009-06-08 21:08:19
我总是求助于this solution。不要太客套，这样就能把工作做好。
编辑:我应该指出，使用以下代码可能会达到您想要的效果(原谅内联样式；它们应该在单独的工作表中)。图像上的默认对齐方式(基线)似乎会导致文本与基线对齐；将其设置为中间会使效果更好，至少在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>
Stack Overflow用户
发布于 2009-06-08 21:10:21
“纯HTML/CSS”是否排除了表的使用？因为他们很容易就能做到你想要的：
<table>
<tr>
<td valign="top"><img src="myImage.jpg" alt="" /></td>
<td valign="middle">This is my text!</td>
</tr>
</table>尽管你喜欢Flame，但这是可行的(而且在老式的、简陋的浏览器中也有效)。
Stack Overflow用户
发布于 2009-06-08 21:09:04
这是一个有趣的问题。如果你事先知道文本容器的高度，你可以使用等于该高度的line- height，它应该垂直居中文本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/967022
复制相关文章
相似问题