主页 > 知识库 > css布局网页水平居中常用方法

css布局网页水平居中常用方法

热门标签:网站文章发布 银行业务 智能手机 铁路电话系统 服务器配置 呼叫中心市场需求 检查注册表项 美图手机

页面水平居中一般会令人很头疼,尤其新手。浏览器之间的不兼容也会带来很大问题。下面来说一下常见的页面水平居中办法。 

以下内容参见《精通CSS》。 

HTML代码: 

body>  
div id="wrapper">  
/div>  
/body>  
IE居中办法:  
body {  
   text-align:center;  
   min-width:760px;  
}  
#wrapper {  
   width:720px;  
   text-align:left;  
}

IE会将text-align:center 误以为让所有东西居中,而不只是文本。然后将容器的内容重新对准左边即可。 

非IE: 

#wrapper {  
   width:720px;  
   margin:0 auto;  
} 

如何兼容IE和非IE?如下: 

#wrapper {  
   width:720px;  
   position:relative;  
   left:50%;  
   margin-left:-360px;  
} 

首先将容器左边边缘定位到页面中间,然后向左移动它宽度的一半。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • CSS如何使DIV层居中
  • CSS解决未知高度垂直居中的问题
  • css实现文字垂直居中的代码
  • css支持标准的图片垂直居中
  • js+CSS实现弹出居中背景半透明div层的方法
  • 讨论CSS中的各类居中方式

标签:沧州 新疆 上海 沈阳 乐山 红河 长治 河南

巨人网络通讯声明:本文标题《css布局网页水平居中常用方法》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266