如何在拉伸等高的div容器内保持内部图标、文本等元素位置对齐

你可以通过嵌套flex布局实现需求，核心思路是让外层容器统一控制所有卡片等高，每个卡片内部用纵向flex布局，给文本区域设置flex-grow属性自动填充剩余高度，保证图标、标题位置固定，仅底部空白区域拉伸。

调整后完整代码 #

CSS代码

/* 新增外层容器，包裹所有服务卡片 */
.services-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 卡片之间的间距，可自行调整 */
  padding: 20px;
}

.servicescontainer {
  display: flex;
  /* 改为纵向排列内部元素 */
  flex-direction: column;
  /* 内部元素水平居中 */
  align-items: center;
  /* 内部元素从顶部开始排列，避免垂直居中错位 */
  justify-content: flex-start;
  background-color: #fff;
  border-radius: 30px;
  padding: 20px;
  box-shadow: 3px 3px 20px #333;
  /* 给卡片设置固定宽度，可自行调整 */
  width: 300px;
}

.servicesicon {
  width: 50px;
  margin-top: 20px;
}
  
.servicestext {
  width: 100%;
  text-align: center;
  padding-right: 10px;
  /* 自动填充卡片剩余高度 */
  flex-grow: 1;
  /* 让内部文本元素顶在上方 */
  display: flex;
  flex-direction: column;
}

HTML代码

<!-- 新增外层包裹容器 -->
<div class="services-wrapper">
  <div class="servicescontainer">
    <div class="servicesicon">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
      </svg>
    </div>
    <div class="servicestext">
      <h4>维修服务</h4>
      <ul>
        <li>定制替换零件</li>
        <li>液压缸维修与翻新</li>
        <li>重型设备维修与改装</li>
      </ul>
    </div>
  </div>

  <div class="servicescontainer">
    <div class="servicesicon">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
      </svg>
    </div>
    <div class="servicestext">
      <h4>焊接与制造</h4>
      <ul>
        <li>钢材、铝材、不锈钢认证焊接服务</li>
        <li>结构件制造与组装</li>
        <li>金属成型与切割</li>
        <li>现场便携服务</li>
      </ul>
    </div>
  </div>
</div>

调整后所有卡片高度会和内容最长的卡片保持一致，图标距顶部、标题距图标的距离完全固定，高度差全部由文本区域底部的空白填充，不会出现标题错位、内容拉伸的问题。

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