writing-mode是CSS3的新特性之一,使用场景不是很多。这个属性主要是改变文档流的显示方式。具体的介绍参考这篇文章:http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/,这里大致提炼下可以使用的部分。使用时需要加上浏览器的前缀。下面的例子介绍不考虑兼容性,都是在weibkit浏览器下测试。

语法

writing-mode可用的值有:horizontal-tb | vertical-rl | vertical-lr  针对IE有另外的属性值,这里不考虑IE,故不做介绍。

horizontal-tb

文档流的方向是水平的,从上到下排列,tb是top-bottom的简写。也就是我们常用的从上到下正常的文本书写。

vertical-lr

文档流的方向是垂直的,从左到右排列,lr是left-right的缩写。

vertical-rl

文档流的方向是垂直的,从右向左排列,rl是right-left的缩写。

使用场景

元素的垂直居中

元素垂直居中有很多种方法可以实现:比如说:

1.对子元素设置定位,left:50%,top:50%,然后使用translate(-50%,-50%)对子元素平移。实现垂直居中。具体实现可参考demo。

.box-1{position:relative;}
.box-1 .item{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);}
<div class="box box-1">
<div class="item">使用translate平移实现垂直居中</div>
</div>

2.使用display:table布局实现元素的垂直居中

.box-2{display:table-cell;text-align:center;vertical-align:middle;}
.box-2 .item{display:inline-block;}
<div class="box box-2">
<div class="item">使用table实现垂直居中</div>
</div>

3.使用writing-mode结合margin:auto 0实现垂直居中

我们知道块状元素的水平居中可用margin:0 auto来实现,即margin-left:auto;margin-right:auto; writing-mode是改变文档流的显示方向的,所以水平居中也可以变为垂直居中。writing-mode结合margin-top:auto,margin-bottom:auto就可以实现。

.box-3{-webkit-writing-mode:vertical-lr;}
.box-3 .item{margin:auto 0;}
<div class="box box-3">
<div class="item">使用writing-mode实现垂直居中</div>
</div>

4. 使用writing-mode结合text-align:center实现垂直居中

原理同第三点,text-align:center水平居中适用于inline的元素,结合writing-mode使用,就可以非常简单的让内联元素在水平方向上实现垂直居中。

.box-4{-webkit-writing-mode:vertical-lr;text-align:center;}
<div class="box box-4">
<img width="100%" src="http://img12.360buyimg.com/da/jfs/t2623/13/1559560386/101307/db2d4319/5742af4cNcc412e8a.jpg">
</div>

文字的排列

改变文字的排版顺序,实现一些特殊的效果。比如(唐诗等等)。

当父元素添加-webkit-writing-mode之后,其所有的子元素都会继承该属性。经过实例验证,子元素也可以重复应用该属性。对应的脚本特性为writingMode

 

参考链接:
http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/

http://www.css88.com/book/css/properties/writing-modes/writing-mode.htm

git地址:https://github.com/rainnaZR/Blog/tree/master/cnblogs/demos/css/writing-mode

利用writing-mode实现元素的垂直居中的更多相关文章

  1. CSS实现元素水平垂直居中—喜欢对称美,这病没得治

    [TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...

  2. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  3. css 实现元素水平垂直居中总结5中方法

    个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...

  4. CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

  5. CSS布局:元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  6. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  7. IE6+未知尺寸元素水平垂直居中

    首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...

  8. 深入学习CSS外边距margin(重叠效果,margin传递效果,margin:auto实现块级元素水平垂直居中效果)

    前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...

  9. 【Web】CSS实现绝对定位元素水平垂直居中

    网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. 13、系统集成项目经理要阅读的书籍 - IT软件人员书籍系列文章

    系统集成项目经理主要对弱电等项目负责.一般包括计算机网络系统,计算机设备系统,智能楼宇,机房建设等.在软考中,系统集成项目经理放在了中级,这个只能说明系统集成项目经理需要的经验没有高级信息系统项目管理 ...

  2. 数据库 DROP命令和DELETE命令的本质区别是什么

    不同点: 1. 从删除内容上区分: truncate和 delete只删除数据不删除表的结构(定义) drop语句将删除表的结构.被依赖的约束(constrain),触发器(trigger),索引(i ...

  3. JAVA_OPTS

    JAVA_OPTS ,顾名思义,是用来设置JVM相关运行参数的变量. JVM:JAVA_OPTS="-server -Xms2048m -Xmx2048m -Xss512k" -s ...

  4. Fiddler基本原理与抓取Andriod与IOS的App数据包

    Fiddler基本原理 Fiddler数据包的原理是Fiddler将自己设置为一个代理服务器,默认监听127.0.0.1:8888端口同时将浏览器的HTTP.HTTPS协议设置为使用代理服务器也就是使 ...

  5. iOS获取手机型号,类似iphone 7这种 含swift和OC

    获取手机设备信息,如name.model.version等,但如果想获取具体的手机型号,如iphone5.5s这种,就需要如下这种 swift: func phonetype () -> Str ...

  6. linux cpu占有率居高不下 调试

    今天调试程序,使用top命令后,发现程序的cpu占有率很高,一直在99,这很可怕,所以来调试. 使用top命令,得如下结果 PID USER PR NI VIRT RES SHR S %CPU %ME ...

  7. Linux压缩指令

    1.windows系统和Linux系统的压缩文件只有zip格式的是通用的 2.windows系统可以解压几乎所有的Linux压缩格式 3.Linux压缩指令 gzip 指令 格式: gzip 压缩的文 ...

  8. 网页中显示pdf

    1.<embed width="800" height="600" src="test_pdf.pdf"> </embed ...

  9. FineReport报表系统实例方案之医院院长查询分析系统

    医院院长查询系统 目前,大中型医院的信息处理正从传统手工方式飞速向电脑信息化建设方案转变,一个大中型医院担负着繁重的医疗和科研任务,以及繁杂的事务性工作,院长必须时刻与各科室保持密切的连续,以便随时了 ...

  10. [Basic Information Theory] Writen Notes