垂直对齐图像旁边的文本？

为什么不垂直对齐：中间工作？然而，垂直对齐：顶部确实有效。

跨度{垂直对齐：中间；}＜div＞<img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>

当前回答

你可能想要这样：

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

正如其他人所建议的，尝试在图像上垂直对齐：

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS并不烦人。你只是没有阅读文档；P

其他回答

因为您必须将行高度设置为div的高度，这样才能工作

2022年，浏览器支持率达到96%，我很惊讶没有人建议使用网格布局。

在本JSFiddle中，3行是实现OP目标所需的全部内容（但提供了多条路线以供比较）：

div {
    display: grid;
    grid-template-columns: min-content max-content;
    align-items: center
}

一个额外的UI细节将包括可选的gap属性的使用，该属性允许调整父网格容器（div）中每个网格项之间的空间。

网格布局的优势

轻松垂直和水平对齐网格项网格项之间的空间调制任何大小的图像（使用最小内容）和文本长度（使用最大内容的一行或使用最小内容的换行（未在fiddle中显示））都可以工作-无需在CSS中硬编码图像尺寸（两种用法都在JSFiddle中演示）现代方法

网格布局的缺点

较旧的浏览器支持更具挑战性网格布局通常需要更有经验的开发人员来正确实现，而不是像块/内联块显示那样简单

您可以做的另一件事是将文本的行高度设置为＜div＞中图像的大小。然后将图像设置为垂直对齐：中间；

这是最简单的方法。

显示带对齐项目的柔性：居中；是垂直对齐项目的最佳方式

第二部分{显示：柔性；对齐项目：居中；}＜div＞<img src=“https://via.placeholder.com/30“alt=”小img“/><span>它起作用</span></div>

在css中使用flex属性。

通过在flex中使用对齐项将文本垂直居中对齐：居中；如果要通过在flex中使用“对齐内容：中心；”将文本水平居中对齐；。

第二部分{显示：柔性；对齐项目：居中；}＜div＞<img src=“http://lorempixel.com/30/30/“alt=”小img“/><span>它起作用了</span></div>

在css中使用表单元格。

第二部分{显示：表格；}第二部分*{显示：表格单元格；垂直对齐：中间；}＜div＞<img src=“http://lorempixel.com/30/30/“alt=”小img“/><span>它起作用了</span></div>

推荐文章