如何在<p>或标签上方设置副标题并调整其对齐位置

当前与期望效果 #

当前显示效果：

想要实现的效果：

问题：副标题目前处于居中状态，需要让它和正文开头对齐，同时保持整体内容在图片上的居中美观性。

原代码 #

CSS #

.UPS {
  width: 50%;
  font-size: 16px;
}

.btw {
  font-size: 13px;
}

.kasa {
  text-align: left;
  font-size: 19px;
}

.centered {
  justify-content: center;
  display: flex;
}

HTML #

<div class="kasa  centered mt-4 mb-1">Waarom OBSTUDIOS?</div>
<div class="centered">
  <p class="centered UPS mb-3">Waar kwaliteit en betaalbaarheid elkaar ontmoeten, daar vindt u OBStudios. Wij bieden eersteklas fotografie en videografie tegen zeer concurrerende prijzen. Bereikbaarheid is een topprioriteit voor ons, want uw tijd is kostbaar. We luisteren aandachtig naar uw wensen en zorgen ervoor dat uw visie tot leven komt in elk project. Klanttevredenheid staat bij ons hoog in het vaandel en dat merkt u aan alles: van het eerste contact tot aan de levering van het eindproduct. Kies voor OBStudios, waar uw behoeften altijd voorop staan.
  </p>
</div>

修改方案 #

核心问题是副标题元素同时添加了centered类（flex布局的居中规则），导致text-align: left无法生效。调整结构，让父容器统一负责整体居中，副标题去掉centered类，即可实现副标题与正文左边缘对齐，同时整体保持居中：

修改后的CSS #

.UPS {
  width: 50%;
  font-size: 16px;
}

.btw {
  font-size: 13px;
}

.kasa {
  text-align: left;
  font-size: 19px;
  margin: 1rem 0;
}

.centered-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

修改后的HTML #

<div class="centered-container">
  <div class="kasa">Waarom OBSTUDIOS?</div>
  <p class="UPS mb-3">Waar kwaliteit en betaalbaarheid elkaar ontmoeten, daar vindt u OBStudios. Wij bieden eersteklas fotografie en videografie tegen zeer concurrerende prijzen. Bereikbaarheid is een topprioriteit voor ons, want uw tijd is kostbaar. We luisteren aandachtig naar uw wensen en zorgen ervoor dat uw visie tot leven komt in elk project. Klanttevredenheid staat bij ons hoog in het vaandel en dat merkt u aan alles: van het eerste contact tot aan de levering van het eindproduct. Kies voor OBStudios, waar uw behoeften altijd voorop staan.
  </p>
</div>

说明：用centered-container作为父容器，通过flex垂直排列+水平居中的规则，让内部的副标题和正文整体保持居中；副标题去掉centered类后，text-align: left会让文本左对齐，自然和正文的左边缘对齐，满足需求。

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