如何实现文本与钻石图标垂直居中对齐？

需要实现文本在带数字的钻石框旁垂直居中显示，目标效果如下：

当前使用的代码 #

CSS 代码

.diamond {
  width: 50px;
  aspect-ratio: 1;
  font: 20pt Arial, sans-serif;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #EB008B;
  margin: 20px;
  margin-bottom: 0px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.image-txt-container {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.pf-title {
  margin-right :auto;
}

HTML 代码

<div class="image-txt-container">
  <div class="diamond">1
  </div>
      <h4 class="pf-title">BRIDGING / SHORT-TERM FINANCE</h4>
</div>

调整方案 #

问题出在两处：.diamond的非对称外边距破坏了垂直对齐基准，h4标签自带的默认上下外边距干扰了对齐效果。修改后的代码如下：

调整后的 CSS 代码

.diamond {
  width: 50px;
  aspect-ratio: 1;
  font: 20pt Arial, sans-serif;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #EB008B;
  margin: 20px; /* 移除单独设置的margin-bottom，保持统一外边距 */
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.image-txt-container {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.pf-title {
  margin-right: auto;
  margin-top: 0; /* 清除h4默认上外边距 */
  margin-bottom: 0; /* 清除h4默认下外边距 */
}

说明

image-txt-container已设置display: flex和align-items: center，本身具备子元素垂直居中的能力。只要消除.diamond的非对称外边距和h4的默认外边距，就能达成目标对齐效果。

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