css垂直居中方法(四)
第六种方法,使用css的writing-mode属性,结合margin:auto。
参考文章:改变CSS世界纵横规则的writing-mode属性
传统的web流中,margin
设置auto
值的时候,只有水平方向才会居中,因为默认width
是100%
自适应的,auto
才有计算值可依,而垂直方向,height没有任何设置的时候高度绝不会自动和父级高度一致,因此,auto
没有计算空间,于是无法实现垂直居中。
原始Web流中,以下代码只能实现水平居中:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 400px;
height: 400px;
background-color: yellow;
}
.auto {
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<img src="me.jpg" class="auto">
</div>
</body>
</html>
加入writing-mode属性之后,代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 400px;
height: 400px;
background-color: yellow;
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
.auto {
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<img src="me.jpg" class="auto">
</div>
</body>
</html>
实现的小猫的垂直居中,实际上如果换个角度看图片,比如该黄色背景的div向左旋转90度,或者把自己的脑袋向右歪一下,这样right就变成了传统web流中的top,就可以很好的理解了为什么用margin可以实现垂直居中。
但是该方法在IE8中的却不好使,但是在把img元素换成div就可以了
css垂直居中方法(四)的更多相关文章
- CSS垂直居中的四种方法
写在前面的话 最近在Stack Overflow上看到 一个不错的回答 ,以下是我对其的总结,分享给大家. 垂直居中的四种方法 ①基础的方法 设置父元素的line-height等于height,这种方 ...
- 最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...
- css垂直居中方法
CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.
- [css] 垂直居中方法
原文链接:http://www.cnblogs.com/2050/p/3392803.html 一.text-algin:center; 适用于行内元素水平居中,如图片.按钮.文字, 但是在IE67下 ...
- css垂直居中方法总结
在网页布局中,我们往往会遇到下图所示的场景,让小图标和文字对齐 可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现. 这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用. 以前遇 ...
- css垂直居中方法(二)
第四种方法: 这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vartial-align属性. 代码如下: <!doctype html> <html lang=&q ...
- css 垂直居中方法总结
工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 HTML <div class="container"& ...
- css 垂直居中方法汇总
查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求,各种图片居中或者各种弹窗,水平居中还好,特别是垂直居中,很多初学者表示太难写了,现在列举一些常用的方法. 实战 这里只讲述cs ...
- css垂直居中方法盘点
1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...
随机推荐
- openstack havana块存储Cinder磁盘加密方法研究
http://blog.csdn.net/cloudresearch/article/details/19092219 在openstack havana的release note中有如下介绍“Att ...
- (转)OpenStack Kilo 版本中 Neutron 的新变化
OpenStack Kilo 版本,OpenStack 这个开源项目的第11个版本,已经于2015年4月正式发布了.现在是个合适的时间来看看这个版本中Neutron到底发生了哪些变化了,以及引入了哪些 ...
- watcher
https://wiki.openstack.org/wiki/Watcher Watcher为OS提供资源优化.主要是通过虚拟机迁移来提高整个数据中心的运营效率,降低TCO. 功能特点: 通过虚拟机 ...
- DataSet.WriteXml()
枚举通常是作为 DataSet.WriteXml() 方法的第二个参数使用.它决定使用哪种格式保存XML: IgnoreSchema --默认值.只写数据集的数据,不带有任何架构信息.如果数据集内无数 ...
- Amazon EMR(Elastic MapReduce):亚马逊Hadoop托管服务运行架构&Hadoop云服务之战:微软vs.亚马逊
http://s3tools.org/s3cmd Amazon Elastic MapReduce (Amazon EMR)简介 Amazon Elastic MapReduce (Amazon EM ...
- 用css方法 可以实现多行 超出宽度 出点点点号
overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical;
- 配合Jenkins自动化构建,bat脚本(一)
C:\Windows\System32\inetsrv\appcmd.exe stop site ServiceIIS C:\Windows\System32\inetsrv\appcmd.exe s ...
- AutoCAD2014的安装与激活
1.安装包与激活文件的下载 链接:https://pan.baidu.com/s/1I2-x9T__sQAgtvjkOyc_1Q 密码:5pd1 2.CAD的安装 此过程没什么特殊要求,安装时随便输入 ...
- LeetCode Student Attendance Record I
原题链接在这里:https://leetcode.com/problems/student-attendance-record-i/description/ 题目: You are given a s ...
- Real-Time Rendering (2) - 变换和矩阵(Transforms and Matrics)
http://blog.csdn.net/silangquan/article/details/9970673 提要 在图形的计算中,比如旋转.缩放.平移.投影等操作,矩阵都扮演着极其重要的角色,它是 ...