DIV常用的居中方法_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:44:02
Original
1034 Leute haben es durchsucht

一.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>
Nach dem Login kopieren

②利用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>
Nach dem Login kopieren

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage