你的位置:首页 > 网页设计

[网页设计]DIV常用的居中方法

一.DIV常用的居中方法:

①利用相对定位设置div外边距自动调整达到居中效果(ps:如果IE浏览器无效果还要在Body里面加上''text-align:center''这个属性,或是外面再加一层DIV,设置属性''text-align:center''),当然居中也有另一种写法:margin-left:auto;margin-right:auto             最重要的是div必须设置width属性

1 <body>2  <div style="width:500px;margin:0 auto">3     .......4  </div>5 </body>

 

②利用left和margin-left两个属性,先将div块设置为margin-left:50%(这表示这个div块的最左边那条边在中间),然后left属性值为div块宽度的负一半,

符号表示div向左边移动宽度的一半。补充说明一下:直接在css中设置left生效的前提是必须设置父容器position:absolute或relative

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7   #myDiv_1{ 8     width:300px; 9     height:200px;10     background-color:#F00;  11     12     margin-left:50%;13     position:absolute;14     left:-150px;15   }16 </style>17 </head>18 19 <body>20   <div id="myDiv_1"></div>21 </body>22 </html>

View Code