如何將垂直文本水平居中對齊？

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
}