Question

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

Answer 1

我总是回到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>

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>

Flame Flame all all all，，，，，，but but but but but but but but but but but but but but（（

Answer 3

有办法：使用图像标记 align =“absmiddle”的属性或者将图像和文本放在表格中的容器DIV或TD中，然后使用

style="vertical-align:middle"

Answer 4

这很有趣。如果您提前知道文本容器的高度，则可以使用等于该高度的行高，并且它应该垂直居中。

Answer 5

有几种选择：

您可以使用line-height并确保它高度为包含元素
使用display：table-cell和vertical align：middle

我首选的选项是第一个，如果是短空格，或者是后者。

Answer 6

我建议使用带有<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>

Answer 7

我想到的一个基本方法是将项目放入一个表中，并有两个单元格，一个包含文本，另一个包含图像，并使用风格= “VALIGN：中心” 用标签。

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

7 个答案: