【Web Trick 1】css解决页面居中

说到页面居中,我想对于每个web开发者来说都不陌生,我们常用的方法会是用js来解决,

但是用js会有很多问题,比如:

1、一般是将居中代码放在页面加载的函数中,这就有问题了,如果页面从一个屏幕拉到另

一个屏幕,居中代码不会执行,居中失效

2、不同浏览器对于js的执行不尽相同,很可能你会遇到一些比较奇怪的问题,但是就是找

不到原因

那么我们该如何去做了,在做了一些demo后,觉得用css实现会比较好,三大主流浏览器都

测试过了,下面列出大概做法:

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE

这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再

加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

代码样例如下

<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto; 
height:400px;
background:#ffffff;
width:400px;
}
</style>
</head>
<body>
<div id="center"></div>
</body></html>
 

PS:需要居中的子元素需要用数值指定其宽度,不能用百分数


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值