简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

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

WBOY
发布： 2016-06-24 11:44:02
原创
990 人浏览过

一.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>
登录后复制

 

相关标签：
DIV常用的居中方法
来源：php.cn
上一篇：9种网页Flash焦点图和jQuery焦点图幻灯片_html/css_WEB-ITnose 下一篇：不错的CSS3图文列表 还有鼠标悬停图片抖动_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在访问路线之前预加载路线数据的最佳方法。 在为给定路由渲染页面之前，我想首先同步获取必要的数据。理想情况下，我希望在页面组件中获取数据，但我不反对在路由器文件中执行此操作。我已经阅读并尝试了各种方法，但部分挑战来自于这样一...
来自于 2023-11-17 14:54:42
0
2
379
Vue项目中未定义模块 我刚刚通过运行npmini tvue@latest创建了一个新的Vue应用程序，如官方文档中指定的那样。然后我尝试按照Vue和Vite网站上的指南将Tailwind添加到我的应用程...
来自于 2023-11-17 12:38:53
0
2
394
更改时如何将键作为 v-for 的选择选项值传递（VueJS） 我正在使用Vue3和Bootstrap5。我有一个select有多个选项。现在我正在显示我的option.TEXT，当我更改某些内容时，这个value也将被传递到我的方法中。但当我...
来自于 2023-11-17 08:55:24
0
1
276
捕获Guzzle的异常 我正在尝试捕获在我正在开发的API上运行的一组测试中的异常，并且我正在使用Guzzle来使用API方法。我已经将测试包装在try/catch块中，但它仍然抛出未处理的异常错误。按照...
来自于 2023-11-16 14:36:03
0
12
290
Laravel 9.x：注册后重定向用户查看成功消息 我试图在注册用户后返回一个包含成功消息的视图，其中包含指向登录页面的链接，但是会话消息不会随视图一起传递。这是我的registred()方法protectedfunctionreg...
来自于 2023-11-12 22:55:21
0
1
336
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！