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

Question

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

T
e
x
t

请参阅此演示以获得更好的可视化效果。

如何使用CSS对齐并且不破坏文本，以使字符看起来在块内水平居中？

Answer 1

那么这个演示呢？

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
}

或这一个演示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

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

套用等于letter-spacing padding-left

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

试试这个{ 演示 }

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