CSS如何实现图标与文本水平对齐同时精准设置标题与列表间距

解决方案 #

核心思路是让图标不参与父容器的高度计算，同时保证和文字垂直居中对齐，具体修改如下：

1. HTML 部分：将「MAIN TEXT」包裹在独立的 span 标签内，保证图标仅和文本本身对齐
2. CSS 部分：去掉原 label 的 flex 布局相关属性，改为通过绝对定位放置图标，直接设置 label 的下外边距控制和下方列表的间距

完整修改后代码 #

.container {
   border-radius: 2px;
   border: 1px solid #da291c;
   background: rgba(218,41,28,0.06);
   padding: 1.25rem;
}

.label {
  font-weight: bold;
  font-size: 0.75rem;
  letter-spacing: 0.063rem;
  text-transform: uppercase;
  /* 移除原有的flex、padding-bottom属性 */
  margin-bottom: 12px; /* 这个值就是标题和Item one的间距，可自由调整 */
  position: relative;
}

.icon {
  background-color: red;
  height: 40px;
  width: 40px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%); /* 实现图标和文字垂直居中对齐 */
}

.list {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
  margin-top: 0;
}

<div class="container">
  <div class="label">
    MAIN TEXT
    <div class="icon"></div> 
  </div>  
  <ul class="list">
    <li>Item one</li>
  </ul>
</div>

修改后调整.label的margin-bottom值即可自由控制标题和列表的间距，不会影响图标和文字的对齐效果，容器的内边距也完全符合要求。

内容的提问来源于stack exchange，提问作者cts