CSS教程之CSS网页结构进门教程3：一列流动宽度居中

只看该作者 · 发表于 2015-1-16 10:39:01

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

可以说Div+CSS代表的是网络世界发展的方向。它是网站标准中常用术语之一

本站2010年9月新增《十天学会web尺度（div+css）》系列教程，接待进修！
页面全体居中是网页计划中最广泛使用的情势，在传统表格结构中，我们利用表格的align="center"属性来完成。div自己也撑持align="center"属性，也能够让div出现居中形态，但css结构是为了完成体现和内容的分别，而align对齐属性是一种款式代码，誊写在XHTML的div属性当中，有违反分享准绳（分别可使你的网站加倍利于办理），因而应该用css完成内容的居中，我们以流动宽度一列结构代码为例，为其增添居中的css款式：

#layout{
border:2pxsolid#A9C9E2;
background-color:#E8F5FE;
height:200px;
width:300px;
margin:0pxauto;
}

margin属性用于把持工具的上、右、下、左四个偏向的外边距，当margin利用两个参数时，第一个参数暗示高低边距，第二个参数暗示摆布边距。除间接利用数值以外，margin还撑持一个值叫auto，auto值是让扫瞄器主动判别边距，在这里，我们给以后div的摆布边距设置为auto，扫瞄器就会将div的摆布边距设为相称，并出现为居中形态，从而完成下场中效果。
注：此办法居中关于IE6以下扫瞄器不撑持。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>一列流动宽度居中——WWW.AA25.CN</title><styletype="text/css"></style></head><body><divid="layout">一列流动宽度居中(AA25.CN)</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
操纵步骤和一列流动宽度不异，只是在CSS边框设置项将界限的上、右、下、左分离设置为0、auto、0、auto便可。