Home > Article > Web Front-end > DIV常用的居中方法_html/css_WEB-ITnose
DIV常用的居中方法_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:02990browse
一.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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：9种网页Flash焦点图和jQuery焦点图幻灯片_html/css_WEB-ITnoseNext article：不错的CSS3图文列表 还有鼠标悬停图片抖动_html/css_WEB-ITnose