时间戳

首页 > 解决方案 > CSS：将项目对齐到中心，但忽略换行

html - CSS：将项目对齐到中心，但忽略换行

问题描述

我正在构建一个 UI，其中有一个带有标题的图标。当文本只有 1 行时，我可以很容易地将这个图标与文本垂直对齐，但问题是当文本换行时，图标与换行文本的中心垂直对齐。我将尝试在这里进行说明。

<icon>  Example text   <-- super easy to align

        Example text
<icon>  that is quite  <-- undesired output
        a bit longer

<icon>  Example text
        that is quite  <-- my goal
        a bit longer

目前我的标记如下所示（在此处使用 Tailwind 速记来减少冗长）：

<div class="flex items-center">
  <img />
  <h1>Example Text</h1>
</div>

有没有合理的方法来解决这个问题？如果我跳过align-items: center不幸的是，图标会浮到顶部，并且看起来与第一行文本不齐。

编辑：可运行演示：http ://esm.codes/#+CiAgYAp9CgpyZWFjdC5yZW5kZXIoaHRtbGA8JHthcHB9IC8+YCwgZG9jdW1lbnQuYm9keSk=

标签： htmlcss

解决方案

位置属性将是您的最佳选择。position: relative 在flex课堂上然后position: absolute在img. 然后你决定top, left图像。这将帮助您以您想要的方式放置它们

推荐阅读