如何实现单行文本图标居中、多行时顶部对齐（无需媒体查询）

要实现单行文本时图标垂直居中，多行文本时图标自动顶对齐的效果，且不依赖媒体查询，可以通过Flex布局+CSS容器查询来实现，利用容器高度的变化自动调整对齐方式，完美适配动态文本内容。

解决方案代码 #

p {
  margin: 0;
  line-height: 1.5; /* 固定单行文本高度，用于容器查询阈值计算 */
}

.rounded-container {
  display: flex;
  align-items: center; /* 单行时默认居中对齐 */
  padding: 14px;
  border: 1px solid black;
  border-radius: 14px;
  background: yellow;
  container-type: size; /* 启用容器查询，允许基于容器尺寸应用样式 */
  gap: 12px; /* 图标与文本的间距，替代原padding-left的空间 */
}

.rounded-container[data-icon-name="account"]::before {
  content: "";
  width: 40px;
  height: 40px;
  background-image: url('https://svgshare.com/i/qKT.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* 确保图标自适应容器大小 */
}

/* 容器查询：当容器高度超过单行文本对应的容器高度时，切换为顶对齐 */
@container (height > 52px) {
  .rounded-container {
    align-items: flex-start;
  }
}

<div class="rounded-container" data-icon-name="account">
  <p>Please login into your account to see your paperless statements</p>
</div>

实现原理 #

1. Flex布局基础：将容器设置为display: flex，默认align-items: center，确保单行文本时图标与文本垂直居中。
2. 容器查询触发：通过container-type: size启用容器查询，当容器高度超过单行文本对应的高度（计算方式：line-height + 上下padding*2，这里是24px + 14px*2 = 52px），自动切换align-items: flex-start，实现图标与文本顶对齐。
3. 动态适配：无需媒体查询，完全基于容器自身高度变化调整样式，完美适配动态文本内容的换行场景。

兼容性说明 #

容器查询目前已被Chrome、Firefox、Safari等现代主流浏览器支持，若需兼容旧版浏览器，可考虑通过JavaScript动态判断文本行数并添加类名，但纯CSS方案是最优解。

内容的提问来源于stack exchange，提问作者The Interactive DOM