首页 > web前端 > html教程 > 如何让绝对定位的元素水平居中_html/css_WEB-ITnose

如何让绝对定位的元素水平居中_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:29:47
原创
1364 人浏览过

如何让绝对定位的元素水平居中:
本章节介绍一下如何让一个绝对定位的元素实现水平居中效果,希望能够给需要的朋友带来一定的帮助。
如果一个块级元素没有采用绝对定位,那么使用margin:0px auto就可以实现此效果,但是对于采用绝对定位的元素并不适用,下面就介绍一下如何实现此效果,代码如下:

<!DOCTYPE html>     <html>     <head>     <meta charset=" utf-8">     <meta name="author" content="http://www.softwhy.com/" />     <title>蚂蚁部落</title>  <style type="text/css">.box{  width:300px;  height:300px;  background:blue;  position:relative;}.inner{  width:50px;  height:50px;  background:red;  position:absolute;  left:50%;  top:50%;  margin-left:-25px;  margin-top:-25px;}</style></head> <body> <div class="box">  <div class="inner"></div></div></body> </html>
登录后复制

以上代码实现了我们的要求,代码非常简单,就是一个比较简单的数学问题,设置了left:50%之后,是元素的左上角水平对齐了,但是并不是元素的中心点水平对齐,这样再采用margin-left方式设置一个负的外边距,值恰好是元素宽度的一半。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13622

更多内容可以参阅:http://www.softwhy.com/divcss/

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板