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

76

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

html css

— 命中
source

126

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

编辑：我应该指出，您可以使用以下代码来实现想要的效果（原谅内联样式；它们应该在单独的工作表中）。图像（基线）上的默认对齐方式似乎会导致文本对齐基线。至少在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>

展开摘要

— 阿杰姆
source

这有效。谢谢。尽管您对跨度具有样式属性，但有一项观察。如果我删除了它，它似乎在视觉上没有任何改变（在FF3.0.10和IE7中）。还需要吗？

— LordHits

3

是。CSS中的垂直对齐方式与您所想的完全相反：单个元素必须在父元素内垂直对齐，而不是告诉父元素将其所有子元素垂直对齐（就像我们在表格单元格中所做的那样）。

— 2009年

3

不幸的是，如果文本自动换行，这将不起作用。仅第一条线居中，其他第一条线则在图像下方溢出（而不是全部在图像的右侧居中，环绕）。jsfiddle.net/vPpD4

— Spongman 2014年

26

“纯HTML / CSS”是否排除使用表格？因为他们会轻松地完成您想要的事情：

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

随便点我一个，但是行得通（并且在旧的，笨拙的浏览器中也行）。

— 布雷特凯利
source

别担心。但是我将忽略基于表的解决方案。;）

— LordHits 2009年

3

您不必惧怕喷火的css龙。

— James P.

1

supprised没有人说，这可是...可是...表是对表格数据

— Daithí

这是在引导导航栏中正确运行的唯一内容。

— Vedran

8

有几种方法：使用图像标记的属性align =“ absmiddle” 或在表的容器DIV或TD中找到图像和文本，然后使用

style="vertical-align:middle"

— 反斜杠17
source

很简单！+5

— luchonacho

3

真有趣。如果您提前知道了文本容器的高度，则可以使用等于该高度的line-height，它应该使文本垂直居中。

将line-height我的设置为span等于img它的下一个使其完全对齐。

— Nick Pickering

2

有两种选择：

您可以使用line-height并确保它作为包含元素的高度
使用显示：表格单元格和垂直对齐：中间

我的首选选项是第一个（如果空间很短），否则选择后者。

— 约翰·麦克科鲁姆
source

2

我建议将表与一起使用<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>

— 邪恶的玲子
source

-2

我想到的一种基本方法是将商品放入表格中，并有两个单元格，一个单元格带有文本，另一个单元格带有图像，并在标签中使用style =“ valign：center”。

— 布赖恩
source

CSS中不存在“ valign”。您将htmlvalign="center"和style="vertical-align:middle"

— etuardu