如何在html / css中的图片旁边垂直居中放置文字？

  • Z时代
  • 2024-01-10
  • 分类：问答

垂直居中html图像旁边的文本的最佳和最简单的方法是什么？需要与浏览器版本/类型无关。纯HTML / CSS解决方案。

回答：

我总是退回到这个解决方案上。不太hack-ish并完成工作。

编辑：我应该指出，您可以使用以下代码来实现想要的效果（原谅内联样式；它们应该在单独的工作表中）。图像（基线）上的默认对齐方式似乎会导致文本对齐基线。至少在FireFox3中，将其设置为中值可以使事物很好地呈现。

<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>

以上是 如何在html / css中的图片旁边垂直居中放置文字？ 的全部内容， 来源链接： utcz.com/qa/430686.html

回到顶部