当前位置:首页 > DIV+CSS实例 > 正文

DIV+CSS网页布局技巧实例17:横向居中(centering)

作者:不详 来源:aa25收集 【 】 浏览: 修改日期:2008-06-18 我要评论(4)     

这是一个简单的技巧,但是值得再说一遍,因为我看见太多的新手问题都是问这个:CSS如何横向居中?你需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样:

你可以这样定义使它横向居中:

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}
第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ,第二个text-align:left;是将#warp中的文字居左。

 

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS实例〗Tags: CSS 横向居中

所属专题:DIV布局技巧

更多评论(4)..会员评论

91dfhy(222.246.*.*) 发表于:2011-07-20 11:18:16
开始标准之路,虽然现在完全可以忽略IE6以下版本。但为了提高CSS技术。为了W3C。还是要学习的
digicake(116.22.*.*) 发表于:2009-12-09 23:59:04
逐步深化认识~~
管理员回复:
楼同(119.36.*.*) 发表于:2009-07-16 22:04:38
楼主啊。。你的CSS讲的好详细,可是我还是有很多不懂,我是新手,请问你能不能教教我怎么样学啊。。。
管理员回复:按照本站教程来说应该不难呀,如果这么详细的教程还看懂我也没办法了。建议不要贪多,一点一点学。
css(59.252.*.*) 发表于:2009-06-19 11:02:24
css style

出差旅游免费预订酒店

【视频教程】新手常见问题