总结一下css让页面居中对齐的方法
1.我们常用的margin:0 auto;方法
这个方法是大家用的最多的方法,使用的时候必须为容器制定宽度!
例子:
这个在大部分浏览器里面都可以很好的实现效果。
但是在IE6之前的版本中却不被支持,下面看一下第二种方法
2. 用text-align实现居中,这个方法其实算是一个hack。
这个方法把整个页面当作文本对待,把body的属性设置为{text-align:center;}
这样的话页面所有内容全部居中了,还需要把页面总的外框(wrap)属性{text-align:left;}
这样的话页面就居中了!
代码:
3.负的外边距
负外边距需要和绝对定位同时使用,才会生效。
首先需要一个{wrap}来包裹所有的页面内容,并将其定位到页面的50%。这样{warp}容器据浏览器左边50%的距离。
然后再用负边距,将容器左边距设置为{wrap}宽度的一半即可。
看代码:
这样wrap就居中对齐了,这个方法基本上可以兼容所有的浏览器了。
综上所述:第一种方法是我们大家首选的解决方案,第二种方法其实可以和第一种方法结合起来用更好,第三种方法是是可以兼容所有的浏览器,如果你对你的也页面兼容性要求的高些,这个也可以作为你的首选哈!
情非得已
21个Sketch实用高频小技巧2019-02-15
25款值得收藏的优秀网站模板免费下载2015-09-16
20套高质量的免费网页模版PSD素材2013-09-02
20款国外时尚大气的按钮开关PSD素材下载2013-07-31
CSS实例教程:十步学会用CSS建站2011-10-05
网页设计师:浅淡网页BANNER设计2010-09-27
网页细节教程:WEB设计精确点滴2010-09-13
网页设计中的点滴细节把握2010-09-01
总结交互组件创新的四种方式2010-06-28
最全的国外电子商务CSS模板下载2010-06-18
实例解析3种文档大屏适配方法
相关文章2632020-03-09
详细解析UI设计中搜索栏设计的技巧
相关文章6092019-03-31
7招表单设计设计师方法提升表单体验
相关文章5672018-12-07
UI设计师必学栅格设计原理和技巧
相关文章4992018-11-29
实例分析9款惊艳的网页设计作品
相关文章5142018-10-10
多种方法快速掌握不同的插画风格
相关文章2912018-10-10
5个作品集网站设计中常见的问题
相关文章3742018-05-10
详解三类经典客群分析电商前端设计
相关文章3262018-04-06
