居中阿拉伯符号字母

Question

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

.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%);分开，但它也不起作用。

Answer 1

这是一个有趣的挑战。阿拉伯字符的宽度好像是0。

因此，要使它们水平居中(使用text-align属性)，你需要添加一些东西来增加宽度。我使用了 字符来做到这一点。

[font - family:宋体]

<span class="bg-dark">
َ&nbsp;
</span>
<span class="bg-dark">
ْ&nbsp;
</span>
<span class="bg-dark">
ُ&nbsp;
</span>

纵向上，这些字符似乎占用了比它们应该占用的更多的空间(我猜是因为它们在阿拉伯语中的使用)。为了解决这个问题，我在span标签周围添加了另一个div。这也解决了使用 的需要。这个div和span标签的背景色必须是相同的(或者你可以将span标签的background-color设置为透明)。然后将高度属性设置为阿拉伯字符以减小其高度。然后你可以使用新的div来垂直和水平定位元素(通过flexbox)。

[horizontal and vertical with flexbox]

.wrapper {
height: 50px;
padding: 20px;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
background: pink;
}
span {
font-size: 4rem;
height: 23px;
}

<div class="border border-5 border-primary rounded text-center p-2">
<div class="bg-primary text-white d-flex justify-content-center" style="gap: 20px">
<div class="wrapper bg-dark">
<span class="bg-dark">
َ&nbsp;
</span>
</div>
<div class="wrapper bg-dark">
<span class="bg-dark">
ْ&nbsp;
</span>
</div>
<div class="wrapper bg-dark">
<span class="bg-dark">
ُ&nbsp;
</span>
</div>
</div>
</div>