css水平居中那点事
2015-08-14 23:08
447 查看
昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了。。…^^
其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好。。。这样以后也有利于自己重温~~
[b]一,text-align[/b]
为什么要第一个写text-align呢?
其实也没有为什么。。。。。(别打我)
但text-align是一个很神奇的东西,在ie6中使用text-align会有惊喜
text-align是文本居中的意思,是使一个块级元素的行内内容对齐,所以正常来说,text-align只对行内内容起作用,不会对块级内容起作用。
但是ie是一个神奇的东西,比较任性。。。在IE6和IE7的混杂模式中,text-align:center可以使块级元素居中。。。很神奇有木有!但是在其他的浏览器中只能作用于行内元素上。
[b]二,margin[/b]
在块级元素居中上,我认为使用margin:0 auto,会是一个比较理想的方法,推荐使用,这个办法我们平时也用得够多,就不详细说明了
有的小伙伴会为了对齐元素或者多栏而使用float,但是在设置了float了之后想要居中,margin就没有用了,这时要使元素居中,可以使用负边距的办法或者是给float元素一个容器,再使用margin。
[b]三,使用负边距[/b]
在css垂直居中那点事,有讲到使用负边距使块级元素垂直居中的问题,所以自然,使用负边距也可以使块级元素水平居中
首先设置position:absolute,然后使元素像偏移50%:left:50%,最后再反向使用margin-left等于块级元素宽度的一半margin-left:-1/2height便可以使元素水平居中
关于position:abs的位移参考元素我就不多说了,不明白请参考css垂直居中那点事。我觉的我还是讲的挺明白。。。哈哈哈
[b]四,使用伸缩盒(flexible-box)[/b]
这也是上一篇讲过的办法,有点懒,我直接给方法
首先需要给要居中的元素一个伸缩盒容器:-webkit-display:box然后设置box-pack:center就可以使元素水平居中了
不明白的请自行搜索伸缩盒的基本知识,但是这个样式在手机端使用的比较多,在浏览器的兼容上面的兼容性不是很好。
题外话:
很神奇的一件事情,在水平居中的方法和垂直居中的方法一样都是4个,水平居中的办法还有很多,在以后如果还遇到其他水平的居中的办法会不定期更新此文章。
本人前端菜鸟,缺陷免不了,还请各位前段大牛不喜勿喷^^
本文为原创作品,未经允许不准私自转载,谢谢!
其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好。。。这样以后也有利于自己重温~~
[b]一,text-align[/b]
为什么要第一个写text-align呢?
其实也没有为什么。。。。。(别打我)
但text-align是一个很神奇的东西,在ie6中使用text-align会有惊喜
text-align是文本居中的意思,是使一个块级元素的行内内容对齐,所以正常来说,text-align只对行内内容起作用,不会对块级内容起作用。
但是ie是一个神奇的东西,比较任性。。。在IE6和IE7的混杂模式中,text-align:center可以使块级元素居中。。。很神奇有木有!但是在其他的浏览器中只能作用于行内元素上。
[b]二,margin[/b]
在块级元素居中上,我认为使用margin:0 auto,会是一个比较理想的方法,推荐使用,这个办法我们平时也用得够多,就不详细说明了
有的小伙伴会为了对齐元素或者多栏而使用float,但是在设置了float了之后想要居中,margin就没有用了,这时要使元素居中,可以使用负边距的办法或者是给float元素一个容器,再使用margin。
[b]三,使用负边距[/b]
在css垂直居中那点事,有讲到使用负边距使块级元素垂直居中的问题,所以自然,使用负边距也可以使块级元素水平居中
首先设置position:absolute,然后使元素像偏移50%:left:50%,最后再反向使用margin-left等于块级元素宽度的一半margin-left:-1/2height便可以使元素水平居中
关于position:abs的位移参考元素我就不多说了,不明白请参考css垂直居中那点事。我觉的我还是讲的挺明白。。。哈哈哈
[b]四,使用伸缩盒(flexible-box)[/b]
这也是上一篇讲过的办法,有点懒,我直接给方法
首先需要给要居中的元素一个伸缩盒容器:-webkit-display:box然后设置box-pack:center就可以使元素水平居中了
不明白的请自行搜索伸缩盒的基本知识,但是这个样式在手机端使用的比较多,在浏览器的兼容上面的兼容性不是很好。
题外话:
很神奇的一件事情,在水平居中的方法和垂直居中的方法一样都是4个,水平居中的办法还有很多,在以后如果还遇到其他水平的居中的办法会不定期更新此文章。
本人前端菜鸟,缺陷免不了,还请各位前段大牛不喜勿喷^^
本文为原创作品,未经允许不准私自转载,谢谢!
相关文章推荐
- JS的覆盖特性来解决文件冲突问题,css的加载问题
- Boostrap入门+样式学习--壹--
- css控制UL LI 的样式详解(推荐)
- 史上最全的CSS hack方式一览
- 利用css如何让嵌套的div层不继承父div层的透明度?
- CSS水平居中/垂直居中的N个方法
- css 如何元素设置水平居中
- 自己写的DIV+CSS 表单
- 12. CSS 字体
- css3 特性实现多行展示,超过则以省略号显示
- css学习笔记(4)
- 在OpenResty中使用淘宝的concat进行css和js合并,同时支持GZIP静态压缩
- css三角的做法
- css定义多重背景动画
- 前端设计之CSS布局:上中下三栏自适应高度CSS布局
- CSS3边框border知识点
- CSS基础
- css3之3D翻牌效果
- 转载一篇CSS布局的博客
- CSS让整个网页成灰色