单栏布局中文本与图片对齐问题排查及修复方案

尝试用Flex实现下图的布局效果，但元素无法像示例图那样对齐且间距一致。采用12列系统，卡片放在单列内，元素本应垂直排列并保持合适间距，但效果不符，求修复方案。

现有代码 #

CSS #

:root {
   --font-secondary: "Katibeh", sans-serif;
   --spacing: 4px;  
   --color-shape-ellipse: #bbdac7;
}

.h-full {
  height: 100%;
}

.h-1\/2 {
  height: 50%;
}

.card {
  border-radius: 30px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.card--frameless {
  justify-content: space-around;
  align-items: center;
}

.card.card--frameless .card__content {
  font-family: var(--font-secondary);
  line-height: normal;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card--frameless .card__content h1 {
  font-size: calc(var(--spacing) * 10);
  letter-spacing: calc(var(--spacing) * 4);
  transform: rotate(-90deg);
  background: linear-gradient(91deg, #a1a1a1 0.68%, #8dd2a8 99.21%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card--frameless .shapes {
  display: flex;
  flex-direction: column;
}

.card--frameless .shapes p {
  color: var(--color-shape-ellipse);
  font-size: calc(var(--spacing) * 15);
  font-family: var(--font-secondary);
}

.card--frameless .ellipses {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card--frameless .ellipses .circle {
  width: 15px;
  height: 15px;
  padding: 10px 0;
}

.card--frameless .ellipses .line {
  height: 100px;
}

HTML #

<div class="card card--frameless h-full">
  <div class="card__content h-1/2">
    <h1>Recipes</h1>
  </div>
  <div class="shapes h-1/2">
    <p>01</p>
    <div class="ellipses">
      <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
      <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
      <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
      <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
      <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
      <img class="line" src="https://www.svgrepo.com/show/533601/arrow-narrow-down.svg" alt="line">
    </div>
  </div>
</div>

修复方案及修改说明 #

问题分析 #

1. .card__content未设置display: flex，导致内部flex布局属性完全失效，无法居中h1。
2. .shapes未设置元素对齐规则，内部p和.ellipses无法水平居中，且间距无控制。
3. 圆圈的间距用padding实现，不如gap精准，容易出现布局偏移。
4. 旋转的h1未设置transform-origin，旋转后可能偏离预期位置。

修改后的代码 #

CSS

:root {
   --font-secondary: "Katibeh", sans-serif;
   --spacing: 4px;  
   --color-shape-ellipse: #bbdac7;
}

/* 确保父容器有高度，否则h-full不生效 */
body, html {
  height: 100%;
  margin: 0;
}

.h-full {
  height: 100%;
}

.h-1\/2 {
  height: 50%;
}

.card {
  border-radius: 30px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  /* 给卡片设置最小高度，确保布局稳定 */
  min-height: 500px;
  margin: 20px;
}

.card--frameless {
  /* 用space-between让上下两部分分别靠近顶部和底部 */
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.card.card--frameless .card__content {
  font-family: var(--font-secondary);
  line-height: normal;
  /* 补上display:flex，开启内部flex布局 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.card--frameless .card__content h1 {
  font-size: calc(var(--spacing) * 10);
  letter-spacing: calc(var(--spacing) * 4);
  transform: rotate(-90deg);
  /* 设置旋转原点，避免偏移 */
  transform-origin: center center;
  background: linear-gradient(91deg, #a1a1a1 0.68%, #8dd2a8 99.21%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.card--frameless .shapes {
  display: flex;
  flex-direction: column;
  /* 让内部元素水平居中 */
  align-items: center;
  /* 控制p和ellipses的间距 */
  gap: calc(var(--spacing) * 5);
  width: 100%;
}

.card--frameless .shapes p {
  color: var(--color-shape-ellipse);
  font-size: calc(var(--spacing) * 15);
  font-family: var(--font-secondary);
  margin: 0;
}

.card--frameless .ellipses {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 用gap替代padding，精准控制圆圈间距 */
  gap: calc(var(--spacing) * 3);
}

.card--frameless .ellipses .circle {
  width: 15px;
  height: 15px;
  /* 去掉padding，用gap控制间距 */
  padding: 0;
}

.card--frameless .ellipses .line {
  height: 100px;
}

HTML

<div class="card card--frameless h-full">
  <div class="card__content h-1/2">
    <h1>Recipes</h1>
  </div>
  <div class="shapes h-1/2">
    <p>01</p>
    <div class="ellipses">
      <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="椭圆">
      <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="椭圆">
      <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="椭圆">
      <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="椭圆">
      <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="椭圆">
      <img class="line" src="https://www.svgrepo.com/show/533601/arrow-narrow-down.svg" alt="竖线">
    </div>
  </div>
</div>

关键修改点 #

• 给body和html设置高度，确保.h-full能继承到有效高度。
• 给.card__content补上display: flex，让内部flex布局生效，实现h1的居中。
• 将.card--frameless的justify-content从space-around改为space-between，配合上下内边距，让元素分布更贴合示例图。
• 给.shapes添加align-items: center和gap，实现内部元素居中且间距可控。
• 用gap替代.circle的padding，更精准控制圆圈之间的垂直间距。
• 给旋转的h1设置transform-origin，避免旋转后位置偏移，并去掉默认margin。

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