gpt4 book ai didi

html - CSS 日语文本不在跨度居中

转载 作者:行者123 更新时间:2023-12-04 09:03:29 26 4
gpt4 key购买 nike

我将此日语文本分割为 <span> s。在下面的图像中,我为跨度添加了红色边框以说明问题。垂直文本是使用 writing-mode: vertical-rl; 实现的周围 div 上的 CSS 属性。
浏览器: Chrome
Japanese example text
浏览器:火狐
enter image description here
浏览器:安卓
enter image description here
如您所见,每个跨度内居中的文本在左侧或顶部都有间隙。或者在 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com