垂直居中曾经很热的话题,也转过网络一些好的解决方案:
这次整理一下,并补充解释一下原理
以下内容经过 ie6,7 ,firefox3.5 测试通过
1.定位居中
定位时 left,top百分比相对于包含块的宽度与高度,relative或static的包含块为block或者td的祖先结点absolute的包含块为position不是static的任何祖先结点。
标准浏览器用 display:table ,原理同传统的表格布局居中,ie 6,7利用定位来实现,注意
ie 6,7 定位时 top,left 的百分比属性表现并不完全相同,同firefox3.5表现也不相同,体现在父元素没有设置height属性时,三个浏览器布局差异:
postion 差异演示 @ googlecode ,ie6,7不相同
postion 差异演示2 @ googlecode ,ie6,7相同
postion 差异演示3 @ googlecode ,ie6,7相同
具体为:ie6 一直向上找到有 height 的祖先或者绝对定位祖先
并必要时动态计算高度
,ie7
一直向上找到 overflow!=visible
的祖先或者有 height 的祖先
或者绝对定位祖先
并必要时动态计算高度
,如果父亲没有height属性则firefox忽略百分比top。
则 国外高人
利用这点(差异演示3)实现了下列方法 :
定位居中 演示 @ googlecode
2. inline-block 居中
inline-block 是一个灰暗的领域,但是经过 css geeks 孜孜不倦的研究
,利用 inline-block hack for ie 以及 vertical-align 属性,达到了各个浏览器上通用的居中效果。
inline-block 居中演示 @ googlecode
3.image 居中
曾经的 taobao ued 考题 ,其实taobao 给出的解法非常不好 ( font-size都用上了 ....),有兴趣可以看看前面转的文章,img 其实就是一个 display :inline-block 的元素,同 2 的思想,可以达到这个效果,其实就是 inline-block 居中的一个特例
image 居中演示 @ googlecode
分享到:
相关推荐
明锋工作室整理常用资料。本次资料是一个自动居中插件,只要设定div长度和高度,其中的图片会自动铺满容器并且自动居中。很简单好用。并且该自动居中插件支持IE6、IE7、IE8、IE9、IE10、CHROME、FIREFOX、OPERA。
为了使表单元素和文字都垂直居中对齐,当文本框和下拉框都没问题,但是单选框和复选框就了,经过反复测试终于完整搞定与大家分享,感兴趣的各位可不要错过了哈
淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签;需要记住一些比例参数,上手较...
整理网上测试的垂直居中、居上、居下的label,经测试通过
今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路: 一、利用 position 和负边距 利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...
昨夜与群友讨论图片垂直居中时,突然想到与这很相像的DIV垂直居中效果.raozou分享了他的效果代码,今将其整理,特贴下来大家一起分享
关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧,烦人的是没有具体或者相当详细的解决方法,希望本文所整理的知识点可以帮助到你
看到问此问题的很多,所以花点时间整理下,欢迎大家提意见,做补充修改,谢谢
很多情况需要用到div的居中,下面是脚本之家编辑参考一些网站整理的一篇文章。希望对朋友们有所帮助。
图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项目可能会用到这个方案,所以把一些常用的方法都收集整理了一下。
给大家整理四种css实现垂直居中效果,思路明了非常不错,具有参考借鉴价值,需要的朋友参考下吧
本文整理了一些CSS中遇到的一些常见问题:IE浏览器模式Hack标识/代码中遇到的一些常见问题/固定容器图片垂直居中等,感兴趣的朋友可以参考下,顺便巩固一下知识,希望本文对你有所帮助
主要为大家介绍CSS图片响应式 垂直水平居中,在最近的项目中经常遇到这样的需求,于是把相关内容整理一下,分享给大家,需要的朋友可以来参考下
个人花大量时间整理出的简历模板,内容丰富,无论是应届生,还是职场老手,都有相应的模板,节约自身时间,提升效率。 亲们下载我任何一个付费资源后,即可私信联系我免费下载其他相关资源,包含简历模板、PPT模板、...
如何垂直居中文本 如何对齐文本与文本输入筐 为什么FF下面不能水平居中呢 为什么FF下文本无法撑开容器的高度 为什么IE6下容器的宽度和FF解释不同呢 为什么web标准中IE无法设置滚动条颜色了 为什么我定义的样式没有...
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会...
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会...
实现水平居中布局的方案实现垂直居中布局的方案实现水平垂直居中布局的方案两列/三列/多列布局实现的方案BFC及其应用清除浮动的方法常见的兼容性问题CSS绘制三角形、圆形、扇形、菱形CSS3动画简述Rem及其转换原理...