Heim > Artikel > Web-Frontend > DIV常用的居中方法_html/css_WEB-ITnose
DIV常用的居中方法_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:021032Durchsuche
一.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 xmlns="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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：9种网页Flash焦点图和jQuery焦点图幻灯片_html/css_WEB-ITnoseNächster Artikel：不错的CSS3图文列表 还有鼠标悬停图片抖动_html/css_WEB-ITnose