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

Question

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

T
e
x
t

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

如何使用CSS对齐它而不分解文本，以便字符在块中水平居中？

Answer 1

这个DEMO怎么样？

<强> HTML

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

<强> CSS

div {
    background: cyan;
    width: 1em;
    line-height: 0.7em; 
    text-align:center
}

或者这个DEMO 2

<强> HTML

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

<强> CSS

div {
    background: cyan;
    width: 1em;
    line-height: 0.7em; 
    text-align:center
}

Answer 2

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

将padding-left等同于letter-spacing

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

JSFiddle

<强>更新

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

JSFiddle

Answer 3

试试这个FIDDLE

div {
    background: cyan;
    width: 1em;
    letter-spacing: 1em;
    line-height: 0.7em;
    word-wrap: break-word;
    margin: 0 auto;
}

Answer 4

试试这个{demo}

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