星空网 > 软件开发 > 网页设计

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

DIV常用的居中方法DIV常用的居中方法
 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

 




原标题:DIV常用的居中方法

关键词:div

div
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

个人来运作做跨境电商,启动资金需要多少?:https://www.ikjzd.com/articles/97440
亚马逊站内和站外推广方式汇总:https://www.ikjzd.com/articles/97444
亚马逊站外引流的27种方法!:https://www.ikjzd.com/articles/97445
深挖 | 假网红到底有多可怕?:https://www.ikjzd.com/articles/97446
您好~威尔.史密斯这样的“神灯”请给我来一打!!:https://www.ikjzd.com/articles/97449
干货!如何做好跨境电商?亚马逊创业新手必知:https://www.ikjzd.com/articles/97456
TikTok斥资210万美元游说美国参议院阻止法案通过 :https://www.goluckyvip.com/news/188220.html
北京飞机票查询(快速查询北京至各地机票价格和航班信息):https://www.vstour.cn/a/366178.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流