本文介绍了如何使用CSS实现竖排文字并做到垂直和水平居中。通过一个两个元素嵌套的解决方案，实现了在Chrome浏览器中的效果。代码中运用了`writing-mode`属性设置文字方向，`display: table-cell`和`vertical-align: middle`确保元素居中，同时调整了字体大小、行高、字间距等细节以优化展示。
偶尔网页中会出现竖排文字的排版需求，经常伴随着重直居中、水平居中的要求。这两天试了好多办法，最后打到一个两个元素嵌套来实现的方法，似乎有点复杂，但没有想到简单的办法。先看一下效果(仅在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;
}
张三丰
张无忌赵 敏
小 昭
2182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
