Html 如何将垂直文本水平居中对齐？

我有一个垂直的文本块，看起来像这样左对齐：

T
e
x
t

请参阅以获得更好的可视化效果

如何使用CSS对齐，而不打断文本，使字符在块内水平居中？

试试这个

这个怎么样

HTML

<div>
    <div>T</div>
    <div>e</div>
    <div>x</div>
    <div>t</div>
</div>

<div>
    T<br>
    e<br>
    x<br>
    t<br>
</div>

还是这个

HTML

<div>
    <div>T</div>
    <div>e</div>
    <div>x</div>
    <div>t</div>
</div>

<div>
    T<br>
    e<br>
    x<br>
    t<br>
</div>

---

字母间距在字母右侧添加空格。因此，您必须在左侧添加相等的填充，以模拟中心对齐

应用

左填充

等于

字母间距

div {
width: 1em;
word-wrap: break-word;
margin:0 auto;
background: cyan;
letter-spacing:0.5em;
padding-left:0.5em;
text-align:center;
}

更新

只需更改值即可调整视觉外观

试试这个{}

---

不，我的意思是对齐块内的字符，而不是对齐块。谢谢，但其中一个要求是文本不能被拆分。我需要它的语义和搜索引擎优化的目的。宽度必须相对的字体大小，因为我需要满足不同的风格。@你可以调整视觉外观，如你所愿，通过改变填充…重点是，字母间距增加间距的权利，所以你需要处理空间的左侧。。答案可以通过更改值进行任意调整。@QuestionOverflow正如我所说，只需更改值即可轻松调整答案。…）我认为在这里居中的关键是字母间距。一定要把它弄得很小。填充物没有真正的用途。谢谢你的帮助。

div {
width: 1em;
word-wrap: break-word;
margin:0 auto;
background: cyan;
letter-spacing:0.5em;
padding-left:0.5em;
text-align:center;
}

div {
    background: cyan;
    width: 60px;
    line-height: 0.7em;
    text-align:center;
    word-wrap: break-word;
    padding:0 10px
}