怎么在CSS3中实现文本垂直排列-创新互联

本篇文章给大家分享的是有关怎么在CSS3中实现文本垂直排列，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了阿鲁科尔沁免费建站欢迎大家使用！

1.0 CSS3标准

writing-mode:horizontal-tb;//默认：水平方向，从上到下 
writing-mode:vertical-rl;  //垂直方向，从右向左
writing-mode:vertical-lr;  //垂直方向，从左向右

demo



    
        
        CSS文字垂直排列
        
            div{
                border: 1px solid lightblue;
                padding: 5px;
            }
            .vertical-text{
                -webkit-writing-mode: vertical-rl;
                writing-mode: vertical-rl;
            }
        
    
    
        
            1. 文字垂直排列 
            2. 文字垂直排列

怎么在CSS3中实现文本垂直排列

2.0 IE中

由于历史的原因，IE下该属性值则显得尤为复杂：

具体可以查看官方文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode/

3.0 一些应用

3.1 垂直居中

通过对这个属性的使用，我们可以结合 text-align:center 实现垂直居中或者使用margin: auto。



    
        
        CSS3 图片垂直居中
        
            div{
                border: 1px solid lightblue;
                padding: 5px;
                height: 500px;
            }
            .vertical-img{
                -webkit-writing-mode: vertical-rl;
                -ms-writing-mode: bt-rl;
                writing-mode: vertical-rl;
                text-align: center;
            }

怎么在CSS3中实现文本垂直排列

3.2 文字下沉效果

我们可以设置文字的writing-mode，然后在结合text-indent来实现文字点击时的下沉效果；



    
        
        文字下沉效果
        
            .btn{
                width: 50px;
                height: 50px;
                line-height: 50px;
                color: white;
                text-align: center;
                font-size: 16px;;
                display: inline-block;
                border-radius: 50%;
                background: gray;
                cursor: pointer;
            }
            .btn:active{
                text-indent: 2px;
            }
            .vertical-text{
                 writing-mode: tb-rl;
                -webkit-writing-mode: vertical-rl;      
                writing-mode: vertical-rl;
                *writing-mode: tb-rl;
            }
        
    
    
        点击领红包
        开

以上就是怎么在CSS3中实现文本垂直排列，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

当前名称：怎么在CSS3中实现文本垂直排列-创新互联
网页地址：http://cqcxhl.cn/article/dioejd.html

重庆分公司，新征程启航

怎么在CSS3中实现文本垂直排列-创新互联

其他资讯