2015第10周日CSS—3

CSS各种居中方法

CSS的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中,不同的居中用不同方法。 水平居中 1、行内元素水平居中(文本,图片) 给父层设置 text-align:center; 可以实现行内元素水平居中。 [code] <!DOCTYPE HTML> <html lang=&qu

CSS的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中,不同的居中用不同方法。 
水平居中 
1、行内元素水平居中(文本,图片) 
给父层设置 text-align:center; 可以实现行内元素水平居中。

2、确定宽度块级元素水平居中 
确定宽度的块级元素水平居中,常用的有 margin:0 auto; 相信很多开发人员都用的是这个,不过本人认为还有更好的写法:margin-left:auto;margin-right:auto; 因为 margin-top 和 margin-bottom 在重置 css 时就已经写了为 0 了。

3、不确定宽度的块级元素水平居中 
不确定宽度的块级元素有三种方法实现。 
方法一:

复制代码

代码如下:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
ul{list-style:none;} 
table{margin-left:auto;margin-right:auto;} 
.demo li{float:left;display:inline;margin-right:5px;} 
.demo a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:white;border:1px solid #316ac5;text-decoration:none;} 
.demo a:hover{background:white;color:#316ac5;} 
</style> 
</head> 
<body> 
<table> 
<tbody> 
<tr> 
<td> 
<ul class="demo"> 
<li><a href="#">1</a></li> 
</ul> 
</td> 
</tr> 
</tbody> 
</table> 
<table> 
<tbody> 
<tr> 
<td> 
<ul class="demo"> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
</ul> 
</td> 
</tr> 
</tbody> 
</table> 
<table> 
<tbody> 
<tr> 
<td> 
<ul class="demo"> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
</ul> 
</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

这里用到了 table 标签来实现不确定宽度的块级元素水平居中。table 本身不是块级元素,如果不给它设定宽度的话,会由内部元素的宽度“撑开”,但即使不设定它的宽度,仅设置 margin-left:auto 和 margin-right:auto 就可以实现水平居中。 
这种方法很巧妙,但是增加了无语义标签,加深了标签的嵌套层数。 
方法二

复制代码

代码如下:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
ul{list-style:none;} 
.wrapper{width:500px;height:100px;background:black;} 
.demo{text-align:center;padding:5px;} 
.demo li{display:inline;} 
.demo a{padding:2px 6px;background:#316ac5;color:white;border:1px solid #316ac5;text-decoration:none;} 
.demo a:hover{background:white;color:#316ac5;} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
<ul class="demo"> 
<li><a href="#">1</a></li> 
</ul> 
<ul class="demo"> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
</ul> 
<ul class="demo"> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
</ul> 
</div> 
</body> 
</html>

方法二是改变元素的 display 值,使块级元素变成行内元素,然后使用 text-align:center 使其居中。相对于方法一,它不用增加无语义标签,简化了标签的嵌套深度,但它也存在一定的问题:它将块级元素变成了行内元素,这样就失去了一些块级元素的功能,比如设置宽度,高度。 
方法三

复制代码

代码如下:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
ul{list-style:none;} 
.wrapper{width:500px;height:100px;background:black;} 
.demo{clear:both;padding-top:5px;float:left;position:relative;left:50%;} 
.demo li{display:inline;float:left;margin-right:5px;position:relative;left:-50%;} 
.demo a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:white;border:1px solid #316ac5;text-decoration:none;} 
.demo a:hover{background:white;color:#316ac5;} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
<ul class="demo"> 
<li><a href="#">1</a></li> 
</ul> 
<ul class="demo"> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
</ul> 
<ul class="demo"> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
</ul> 
</div> 
</body> 
</html>

方法三通过给父层设置浮动和相对定位以及 left:50%,子元素设置相对定位和 left:-50% 来实现水平居中。它可以保留块级元素的功能,而且不会添加无语义标签,不增加嵌套深度,但是设置了相对定位,会带来一定的副作用。 
这三种方法各有优缺点,具体使用哪种方法可以视具体情况而定。 
垂直居中 
1、父层高度不确定的垂直居中 
通过给父层设置相同的上下内边距实现。

复制代码

代码如下:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
.demo{width:500px;color:white;margin-bottom:10px;padding-top:20px;padding-bottom:20px;background:black;} 
.content{width:200px;height:50px;background:red;} 
</style> 
</head> 
<body> 
<div class="demo">hello world</div> 
<div class="demo"><img src="cat.jpg" width="248" height="162" /></div> 
<div class="demo"><div class="content"></div></div> 
</body> 
</html>

2、父层高度确定的单行文本垂直居中 
通过给父层设置行高来实现,行高和父层高度相同。

复制代码

代码如下:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
.demo{width:500px;color:white;background:black;height:100px;line-height:100px;} 
</style> 
</head> 
<body> 
<div class="demo">hello world</div> 
</body> 
</html>

3、父层高度确定的多行文本、图片、块级元素垂直居中 
方法一: 
说到垂直居中,css 中有个用于垂直居中的属性 vertical-align,但只有在父层为 td 或者 th 时,这个属性才会生效,对于其他块级元素,例如 div、p 等,默认情况是不支持的。在 firefox 和 ie8 下,可以设置块级元素的 display 值为 table-cell,来激活 vertical-align 属性,但 ie6,7 并不支持,所以这种方法没有办法跨浏览器兼容。但是我们可以使用 table。

复制代码

代码如下:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
.wrapper{background:black;width:500px;color:white;height:100px;} 
.demo{width:200px;background:red;height:50px;} 
</style> 
</head> 
<body> 
<table> 
<tr> 
<td class="wrapper"> 
hellow world<br/> 
hellow world<br/> 
hellow world<br/> 
</td> 
</tr> 
</table> 
<table> 
<tr> 
<td class="wrapper"> 
<img src="cat.jpg" /> 
</td> 
</tr> 
</table> 
<table> 
<tr> 
<td class="wrapper"> 
<div class="demo"></div> 
</td> 
</tr> 
</table> 
</body> 
</html>

table 可以很好的实现垂直居中效果,但是它添加了无语义标签,增加了嵌套深度。 
方法二: 
对支持 display:table-cell 的 ie8 和 firefox 用 display:table-cell 和 vertical-align:middle 来实现居中,对不支持 display:table-cell 的 ie6 和 ie7 使用 hack 写法。

复制代码

代码如下:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
.mb{margin-bottom:10px;} 
.wrapper{background:black;width:500px;color:white;height:100px;margin-bottom:10px;display:table-cell;vertical-align:middle;*position:relative;} 
.demo{width:200px;background:red;height:50px;} 
.vam{*position:absolute;*top:50%;} 
.va{*position:relative;*top:-50%;} 
</style> 
</head> 
<body> 
<div class="mb10"> 
<div class="wrapper"> 
<div class="vam"> 
<div class="va"> 
hellow world<br/> 
hellow world<br/> 
hellow world 
</div> 
</div> 
</div> 
</div> 
<div class="mb10"> 
<div class="wrapper"> 
<div class="vam"> 
<img src="cat.jpg" /> 
</div> 
</div> 
</div> 
<div class="mb10"> 
<div class="wrapper"> 
<div class="vam"> 
<div class="va demo"></div> 
</div> 
</div> 
</div> 
</body> 
</html>

利用 hack 技术区别对待 firefox、ie8 和 ie6、ie7,在不支持 display:table-cell 的 ie6 和 ie7 下,通过给父子两层元素分别设置 top:50% 和 top:-50% 来实现居中。这种方法的好处是没有增加额外的标签,但缺点也很明显,一方面它使用了 hack,不利于维护,另一方面,它设置了 position:relative 和 position:absolute,带来了副作用。

总结几种简单的居中方法

1. 把margin设为auto

具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效。

2、使用 text-align:center

这个没什么好说的,只能对图片,按钮,文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中,它是能对任何元素进行水平居中的。

3、使用line-height让单行的文字垂直居中

把文字的line-height设为文字父容器的高度,适用于只有一行文字的情况。

4、使用表格

如果你使用的是表格的话,那完全不用为各种居中问题而烦恼了,只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中,垂直居中可以使用 vertical-align:middle,至于水平居中,貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中,IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用,对块状元素无效。

在ie6、7中可以通过css的text-algin来控制表格内容的水平方向的对齐,无论内容是行内元素还是块状元素都有效。

但在ie8+以及chrome、firefox等浏览器中的text-align:center对块状元素无效,只能用表格自有的align属性。

5、使用display:table-cell来居中

对于那些不是表格的元素,我们可以通过display:table-cell 来把它模拟成一个表格单元格,这样就可以利用表格那很方便的居中特性了。例如:

但是,这种方法只能在IE8+、谷歌、火狐等浏览器上使用,IE6、IE7都无效。

那面所说的都是很基础的方法,自然不能称之为奇淫巧计,下面就来说一些需要使用一些技巧的居中方法。

6、使用绝对定位来进行居中

此法只适用于那些我们已经知道它们的宽度或高度的元素。

绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的,而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离,所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置,这个负的margin值就取元素宽度或高度的一半。

运行效果:

如果只想实现一个方向的居中,则可以只使用left , margin-left 来实现水平居中,使用top , margin-top来实现垂直居中。

7、另一种使用绝对定位来居中的方法

此法同样只适用于那些我们已经知道它们的宽度或高度的元素,并且遗憾的是它只支持IE9+,谷歌,火狐等符合w3c标准的现代浏览器。

下面用一段代码来了解这种方法:

运行效果:

这里如果不定义元素的宽和高的话,那么他的宽就会由left,right的值来决定,高会由top,bottom的值来决定,所以必须要设置元素的高和宽。同时如果改变left,right , top , bottom的值还能让元素向某个方向偏移,大家可以自己去尝试。

8、使用浮动配合相对定位来进行水平居中

此方法也是关于浮动元素怎么水平居中的解决方法,并且我们不需要知道需要居中的元素的宽度。

浮动居中的原理是:把浮动元素相对定位到父元素宽度50%的地方,但这个时候元素还不是居中的,而是比居中的那个位置多出了自身一半的宽度,这时就需要他里面的子元素再用一个相对定位,把那多出的自身一半的宽度拉回来,而因为相对定位正是相对于自身来定位的,所以自身一半的宽度只要把left 或 right 设为50%就可以得到了,因而不用知道自身的实际宽度是多少。

这种使用浮动配合相对定位来居中的方法,优点是不用知道要居中的元素的宽度,即使这个宽度是不断变化的也行;缺点是需要一个多余的元素来包裹要居中的元素。

看下代码:

运行效果:

9、利用font-size来实现垂直居中

如果父元素高度是已知的,要把它里面的子元素进行水平垂直居中,则可以使用这种方法,且子元素的宽度或高度都不必知道。

该方法只对IE6和IE7有效。

该方法的要点是给父元素设一个合适的font-size的值,这个值的取值为该父元素的高度除以1.14得到的值,并且子元素必须 是一个inline或inline-block元素,需要加上vertical-align:middle属性。

至于为什么是除以1.14而不是其他的数,还真没有人知道,你只需要记住1.14这个数就行了。

在方法5中说过在IE8+、火狐谷歌等现在浏览器中可以用display:table-cell来进行居中,而这里的font-size的方法则适用于IE6和IE7,所以把这两种方法结合起来就能兼容所有浏览器了:

         

上面的例子中因为要居中的元素是一个块状元素,所以我们还需要把他变成行内元素,如果要居中的元素是图片等行内元素,则可以省略此步。

另外,如果 vertical-align:middle 是写在父元素中而不是子元素中,这样也是可以的,只不过计算font-size时使用的  1.14 这个 数值要变成大约 1.5 这个值。

http://www.jb51.net/css/66071.html

http://www.cnblogs.com/2050/p/3392803.html

深入理解CSS3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

时间: 2024-11-05 12:23:04

2015第10周日CSS—3的相关文章

2015第10周五CSS—2

经常遇到的浏览器兼容性有哪些?如何解决? 1.浏览器默认的margin和padding不同.解决方案是加一个全局的*{margin:0;padding:0;}来统一. 2.IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大.解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性.测试代码如下: <html> <head> <title>Demo</title> &

2015第10周四-CSS小结

这两天做前台页面发现个人在CSS前端方法很多基础知识都忘了,晚上又搜索学习了下,把相关内容摘录总结. CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {declaration1; declaration2; ... declarationN } 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(property)是您希望设置的样式属性(style attribute).每个属性有一个值.属性和值被冒号分开. selector

2015年10个最佳Web开发JavaScript库

2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是搞Web开发的,那么大多更喜欢支持前端开发的JavaScript.此脚本语言使用相对比较容易,并能为网站和Web应用创造了有趣的用户界面.下面是10个最佳的可用于Web项目开发的JavaScript库. 1. IO.js: IO.js是一个以Chrome V8  runtime为引擎的JavaScr

中级学员:2015年10月22日作业

中级学员:2015年10月22日作业一.采购管理1.采购管理的主要过程:2.工作说明书与范围说明书的区别:3.招投标程序是什么:4.采购审计的定义和内容.二.信息(文档)和配置管理1.文档从项目周期角度分为哪三类:2.图表编号规则,说明之:3.配置管理活动和流程:4.简述四种配置库及主要内容:5.简述配置项版本号标识的内容:6.功能配置审计包括哪些内容:7.物理配置审计包括哪些内容. 最晚提交时间:下次上课前. 提交方法:同学们按照要求完成作业,并发布在自己的51CTO博客,并将博文地址以评论的

陈嘉 2015/07/10 个人文档

姓名 陈嘉 日期 2015/7/10 主要工作及心得 在其他部分的代码合并完成后,我们开始了调试工作.我和赵晓铮负责操作员的调试. 程序合并完成运行后,出现了很多问题.一开始,输入用户名和密码后,并没有反应.没有输入提示信息.我们根据控制台显示的错误信息一一进行修改. 同过修改我明白了前期每个模块质量的重要性.任何一个模块的一点小问题都会导致系统不能正常运行.比如数据结构,函数传参.我们找到问题后由编写相关代码的同学进行修改,最后可以成功实现功能. 遇到的问题 调试过程中遇到无法登录.点击提交没

中级学员:2015年10月27日作业

中级学员:2015年10月27日作业一.项目收尾管理1.项目收尾包括哪三方面内容?2.项目总结的意义;3.项目总结会包括哪些内容:4.项目评估包括哪些方面:5.项目审计的定义.6.一般项目人员转移的流程:二.知识产权管理1.著作权由哪3个要素组成:2.认定职务作品,考虑的前提有哪2个:三.法律法规和标准规范1.标准名称由哪4个要素组成:2.政府采购法,包括哪六种采购方法,以及每种的前提条件:3.教材中,把标准分为基础标准.开发标准.??标准和??标准.四.请背诵教材P180页项目管理知识体系,并

高级学员:2015年10月24日作业

高级学员:2015年10月24日作业一.信息安全系统和安全体系1.信息安全系统三维空间示意图中,X.Y.Z轴的名称,及它们各自包括的内容:2.MIS+S.S-MIS.S2-MIS的特点分别有哪些:二.信息安全风险评估1.什么是威胁:2.什么是脆弱性(弱点):3.什么是影响三.安全策略1.安全策略的核心内容是哪七定:2.<计算机信息安全保护等级划分准则>将信息系统分为哪5个安全保护等级,以及它们的适用范围:四.信息安全技术基础1.常见的对称密钥算法有哪些?它们的优缺点:2.常见的非对称密钥算法有

高级:2015年10月23日作业答案

高级学员:2015年10月23日作业一.业务流程管理与重组1.流程管理的本质与核心是什么: 流程管理的核心是流程,流程管理的本质就是构造卓越的业务流程.2.流程管理与BPR的区别: 流程管理是以一种规范化的构造端到端的卓越业务流程为中心,以持续的提高组织业务绩效为目的的系统化方法.与业务流程重组的定义相似.流程管理的思想包含了BPR,但比BPR的概念更广泛,更适合现实需要.3.业务流程改进的过程和方法中,分析问题用哪2个图:寻找原因用什么图. 分析问题采用头脑风暴法.矩阵图法,寻找原因用鱼骨图法

高级学员:2015年10月23日作业

高级学员:2015年10月23日作业一.业务流程管理与重组1.流程管理的本质与核心是什么:2.流程管理与BPR的区别:3.业务流程改进的过程和方法中,分析问题用哪2个图:寻找原因用什么图.4.流程的分析与设计方法是哪六条(只答小标题):5.BPR的首要问题是什么:6.BPR的实施会引起企业哪3个方面的变化.二.知识管理1.对于项目组织来说,什么是知识.2.隐性知识的共享方法有哪4条:三.项目整体绩效评估1.什么是3E审计:2.霍尔从哪3个维度考察系统工程.3.用什么分别解决:确定性.可测定的不确