登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

无所谓了嘛

珍惜现在,放眼未来

 
 
 

日志

 
 
 
 

css中各个浏览器水平居中和垂直居中问题  

2010-11-09 20:32:55|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在css中对body标签使用margin:0 auto;后,body应该是会居中的,问题是微软在IE8中不支持了,oprea、火狐、谷歌这3款浏览器都支持。

那么怎样使得各个浏览器都能居中呢?

<style>
body{
 text-align:center;/*这个使得body中的内容水平居中,div属于body的内容,所以div自然也就居中了*/
}
#center{
 border:1px solid black;/*在实际使用中提倡不适用边框,这里仅仅是便于理解而已*/
 width:400px;
 margin:0 auto 0 auto;/*这个使得div在friefox等其他浏览居中*/
 height:33%;/*div的高度为body的1/3,*/

top:33%;/*设置顶端定位为1/3,而div的高度又占据了1/3,所以下面的空余自然也是1/3了。这样div就可与垂直居中了*/
 position:relative;
  text-align:left;
 }
</style>
<body>
<div id="center">
fasfdsafdfdsaf
</div>
</body>

  评论这张
 
阅读(407)| 评论(0)

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018