我将这段日语文本分割成 <span> s。在下图中，我向跨度添加了红色边框来说明问题。垂直文本是使用 writing-mode: vertical-rl; 实现的周围 div 的 CSS 属性。
浏览器:Chromium
浏览器:火狐
浏览器:安卓
正如您所看到的，每个跨度内的文本都居中，左侧或顶部有间隙。或者就 Android 而言，它甚至似乎没有将每个字符放在一个正方形内。有没有办法确保每个字符在 <span> 内完美居中是吗？
示例 HTML 文件:
<!DOCTYPE html>
<html lang="ja">
<style>
span {
border: 1px solid red;
text-align: center;
}
</style>
<body>
<div>
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
<br>
<div style="writing-mode: vertical-rl">
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
</body>
</html>结果似乎取决于浏览器!
最佳答案
如果我能看到 CSS 代码会更有帮助，但如果还没有，请尝试使用 text-align CSS 属性。
您可以像这样使用它:text-align: center;
span {
border: 1px solid red;
text-align: center;
font-size: 30px;
}<!DOCTYPE html>
<html lang="ja">
<body>
<div>
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
<br>
<div style="writing-mode: vertical-rl">
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
</body>
</html>关于html - CSS 日语文本未在跨度中居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63514545/