我相信所有的前端菜鸟在刚开始工作的时候都会和我一样,收到实现居中的需求。
网上的CSS居中帖子不胜枚举,但大多都没有很好的总结(或者有好的但是我没运气碰到)
今天就自己写一个吧,也算是对之前工作的总结。
一、水平居中
1.将元素水平居中(use margin & width property)
css code:
div.h_align{ border: 1px solid black; /*key code:*/ margin-left: auto; margin-right: auto; width: 300px;/*必须指定宽度*/ }
html code:
<div class="h_align">我是div!come on 求水平居中!</div>
summary:
(1)以上方法在无文档类型或文档类型是HTML4时,对IE无效,因为此时IE将此文档解析为HTML而不是XHTML或HTML5
(2)使用上述方法水平居中,必须指定宽度
2.将元素水平居中(use absolute position & width)
css code:
section{ border: 1px solid red; /*key code:*/ position: absolute; left: 50%; width: 300px; margin-left: -150px; }
html code:
<section>我是section!同求水平居中!</section>
summary:
(1)这个方法的思想是,利用绝对定位 left 50%以后,使负外边距的值为元素宽度的一半,从而实现居中(这个思路也可以用在垂直居中上)
二、垂直居中
1.单行文本垂直居中
css code:
p.single_line{ border: 1px solid green; /*key code:*/ height: 4em; line-height: 4em; overflow: hidden; }
html code:
<p class="single_line">我是单行文本!我有100px高,我要垂直居中!</p>
summary:
(1)key:令行距和元素高度相同,这样就限定了容器内只能容纳一行文本内容,于是文本就居中了
(2)设定height和line-height时,推荐使用相对单位em,这样能够在字体非常大的时候,依然保持居中
(3)overflow:hidden是必须的,理由同上,也是为了保持居中
(4)优点:块元素和行内元素均适用此方法,并且在主流浏览器中适用
(5)缺点:文本长度有限(最多只能一行),且对于非文本的元素无效
2.无固定高度的多行文本垂直居中
css code:
p.multi_line{ border: 1px solid gray; width: 100px; /*key code:*/ padding-top: 30px; padding-bottom: 30px; }
html code:
<p class="multi_line">我是多行文本!我宽100px但是没有固定高度!跪求垂直居中!</p>
summary:
(1)key:令上内边距和下内边距相等。值是多少无所谓,相等即可,使用上下外边距相等也可
(2)优点:块元素和行内元素均适用此方法,非文本元素也可以使用,并且在主流浏览器中适用
(3)缺点:无法设置高度
3.将固定高度的容器模拟表格布局实现垂直居中
css code:
div.wrap1{ border: 1px solid black; /*key code:*/ display:table; height:300px; } div.wrap2{ /*key code:*/ display:table-row; } div.wrap3{ /*key code:*/ display:table-cell; vertical-align:middle; } div.maincontent{ width:350px; background-color:black; color: white; /*key code:*/ height:90px;/* less than wrap1.height */ }
html code:
<div class="wrap1"> <div class="wrap2"> <div class="wrap3"> <div class="maincontent">我老爸高300px,我自己是350 X 90 px,我也可以居中啦哇哈哈,可是别在IE6/7下看我噢</div> <!-- other content --> </div> </div> </div>
summary:
(1)key:使用display属性中的table、table-row、table-cell来将元素模拟成表格布局。处于wrap3中的所有元素都会垂直居中,但是它们的高度总和不能超过wrap1的高度
(2)使用display:table-cell的时候必须同时在祖先元素使用display:table
(3)缺点:不能在IE6/7下实现
4.IE7及以下的解决办法
css code:
div.IE7wrap1{ border: 1px solid pink; /*key code:*/ height: 300px; position: relative; } div.IE7wrap2{ /*key code:*/ position: absolute; top: 50%; left: 0; } div.IE7maincontent{ width:350px; background-color:black; color: white; height: 90px; /*key code:*/ position: relative; top:-50%; left: 0; }
html code:
<div class="IE7wrap1"> <div class="IE7wrap2"> <div class="IE7maincontent">嘿哥们,我是IE6/7的解决方案,要看我就要用IE6/7,不然我丑爆了</div> </div> </div>
summary:
(1)算是一个css hack,服务于IE6/7
三、总结
工作时积累下来的经验,以及摘抄网上的资料,总结成这一篇博文,如果对您有帮助,请您推荐。
共勉。
相关推荐
后者适合布局模板,模板中填充的内容你没法控制——比如,在编辑wordpress模板时,你肯定没法考虑每篇博文的长度。这篇博文,就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,...
阅读目录 什么是跨域 常用的几种跨域处理方法: 跨域的原理解析及实现方法 总结 摘要:跨域问题,无论是面试...JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略,在
如果你耐心仔细看完本文,相信以后再遇到导出EXCLE操作的时候你会很顺手觉得SO EASY,主要给新手朋友们看的,老鸟可以直接飘过了,花了一晚上的时间写的很辛苦,如果觉得对你有帮助烦请留言支持一下,我会写更多基础...
这个PPT是入门级,给刚入行的朋友看看即可,总结的这些渠道经验也都是老生常谈,我比较主观,所以说的东西也很主观。也许不那么完善,欢迎补充 方法论的东西我高度不够,总结不出,目前我们的产品推广还是在走创意...
去年到现在就一直有人希望我出一篇关于waf绕过的文章,我觉得这种老生常谈的话题也没什么可写的。很多人一遇到waf就发懵,不知如何是好,能搜到的各种姿势也是然并卵。但是积累姿势的过程也是迭代的,那么就有了此文...
今天在翻阅别人博客时看到了对array_merge的一些使用心得,故此自己来进行一次总结。 array_merge是将一个或者多个数组进行合并。 这个函数多用于在从数据库中取出的结果集的合并操作。 参数配置也很简单array_...
java编码中的中文问题是一个老生常谈的问题了,每次遇到中文乱码LZ要么是按照以前的经验修改,要么则是baidu.com来解决问题。...当然,此系列博文并非LZ完全原创,都是在前辈基础上总结,归纳,如果雷同纯属借鉴……
HashMap的原理是老生常谈了,不作仔细解说。一句话概括为HashMap是一个散列表,它存储的内容是键值对(key-value)映射。这篇文章主要总结了关于jdk7 中HashMap的知识点,需要的朋友可以参考借鉴,一起来看看吧。