html文字竖排垂直居中显示,CSS文字竖排效果且垂直居中水平居中
生活随笔
收集整理的這篇文章主要介紹了
html文字竖排垂直居中显示,CSS文字竖排效果且垂直居中水平居中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
偶爾網頁中會出現豎排文字的排版需求,經常伴隨著重直居中、水平居中的要求。這兩天試了好多辦法,最后打到一個兩個元素嵌套來實現的方法,似乎有點復雜,但沒有想到簡單的辦法。先看一下效果(僅在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文字竖排效果且垂直居中水平居中的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: docker之容器常用命令及基本操作
- 下一篇: 使用CSS3+JQuery打造自定义视频