Home > Web Front-end > HTML Tutorial > 如何让绝对定位的元素水平居中_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:29:47
Original
1364 people have browsed it

如何让绝对定位的元素水平居中:
本章节介绍一下如何让一个绝对定位的元素实现水平居中效果,希望能够给需要的朋友带来一定的帮助。
如果一个块级元素没有采用绝对定位,那么使用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>
Copy after login

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

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

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

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template