默认情况下，这些符号位于مُحَمَّد等字符的上方。我想知道是否可以将这些符号居中。

.wrapper {
  text-align: center;
  vertical-align: center;
}

span {
  font-size: 4rem;
  display: inline-block;
  padding: 2rem;
  margin: 0.2rem;
  background: pink;
}

<div class="border border-5 border-primary rounded text-white text-center p-2">
  <div class="wrapper mb-4 bg-primary text-white text-center">
    <span class="bg-dark"> َ</span>
    <span class="bg-dark"> ْ</span>
    <span class="bg-dark"> ُ</span>
  </div>
</div>

我试过：

.wrapper,
span {
    display: flex;
    align-items: center;
}

但没有成功。
此外，我尝试用position: absolute; top: 50%; transform: translateY(-50%);将符号分隔在一个跨度内，但也不起作用。