2015-05-11  589 views 评论

WebKit核心下CSS网页居中样式写法

以前经常用的方法,但是貌似啥时候遇到过出错了,就改用了方法!
(1)以下是我改用的方法:
(之前用的方法出了错,自己改了下发现可以了!以下CSS是这样的:把整个body元素的边距和填充设置为0,并且把body元素中的内容居中。而body,则为元素body下的一个顶层容器,在元素body下居中,这样一来,body下的内容也会跟正居中,所以需要为body设置text-align:left;左对齐的样式!   之前这个方法百试不爽,昨天居然发现在搜狗浏览器的高速模式,即WebKit核心下无法居中,着实蛋疼,于是乎我又拿出了老一套的网页居中方案,没想到成了!!)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{margin:0;padding:0;text-align:center;}
.body{ margin:0px auto 0 auto; border:1px solid #ccc; width:1000px;text-align:left;}
</style>
</head>
<body>
<div class="body">
<div>
1111111111111111111111111111<br />
2222222222222222222222222<br />
33333333333333333333333333333333
</div>
</div>
</body>
</html>
以下为老方法(暂时测试在WebKit核心下同样可以居中):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{margin:0}
.body{ margin:0px auto 0 auto; border:1px solid #ccc; width:1000px;}
</style>
</head>
<body>
<div class="body">
<div>
1111111111111111111111111111<br />
2222222222222222222222222<br />
33333333333333333333333333333333
</div>
</div>
</body>
</html>

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: