css实现文字纵向排版并且水平垂直居中

第一种方法:CSS属性write-mode实现文字竖排

.wordWrapClass{
    word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/ 
    /*自测了这句话没啥用*/
    writing-mode: vertical-rl;/*从左向右 从右向左是 writing-mode: vertical-rl;*/  
    writing-mode: tb-rl;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/ 
    text-align: center;
    padding:0px;  
    display:flex;
    -webkit-display:flex;
    flex-direction:column; 
    /* align-content: center; */
    /* vertical-align: middle; */
    justify-content:center;
}

第二种方法:css属性transform:rotate实现文字竖排

-webkit-transform: rotate(90deg);

这个自己试一下好啦,我用得第一种方法比较好

发布了29 篇原创文章 · 获赞 4 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/cccdf_jjj/article/details/94567907