偶爾網頁中會出現豎排文字的排版需求，經常伴隨著重直居中、水平居中的要求。這兩天試了好多辦法，最后打到一個兩個元素嵌套來實現的方法，似乎有點復雜，但沒有想到簡單的辦法。先看一下效果(僅在chrome瀏覽器中調試過)。

代碼如下，很簡單。

值班情況顯示

.cell span{

-webkit-writing-mode: vertical-r;

writing-mode: vertical-rl;

font-size:80px;

font-family:黑體,simhei,Arial;

height:4.5em;

line-height:1.2em;

word-spacing:1.5em;

letter-spacing:0.3em;

word-break:break-all;

}

.cell{

display:table-cell;

width:2.8em;

height:4.5em;

text-align:center;

vertical-align:middle;

float:left;

border:3px solid gray;

background-color:#dce6f2;

}

張三豐張無忌趙　敏小　昭

總結

以上是生活随笔為你收集整理的html文字竖排垂直居中显示,CSS文字竖排效果且垂直居中水平居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。