CSS 水平居中之相对定位与负边距法
浏览:1644次 出处信息
不过条条大道通罗马,条条小路通我家。今天还看到一个使用相对定位与负边距来使元素水平居中的方法。之前咋没玩过,乍一看还挺不理解。后来自己捉摸了一会儿,还画了两张图,终于理解了。-_-!!!
大家先来看代码,然后再看图:
以下是代码片段: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>DIV 水平居中</title> <style> div#wrap { position: relative; width: 760px; left: 50%; margin-left: -380px; border: 1px solid #333; background-color: #ccc; } </style> </head> <body> <div id="wrap"> <p> 这是一个p标签里的元素 </p> </div> </body> </html> |
首先我们可以想一下,使元素位于水平居中是一个什么过程。大家看一下一个页面的中间点在哪?注意中间的竖线哦。
所以我们先把要居中的元素相对于其原来位置向右移个50%。
现在,看元素已经放在了页面的中间位置,但是并未居中。居中呢就是整个元素的中心点正好与页面的中心线重叠。于是我再将元素margin-left改为其宽度的一半,当然为了往左挪这个偏移量是负数。
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:IE 6与W3C盒子模型
后一篇:CSS 简易浮动清除方法讨论 >>
文章信息
- 作者:simaopig 来源: 小小子,simaopig
- 标签: 相对定位 负边距法
- 发布时间:2010-06-27 22:06:36
近3天十大热文
- [124] Go Reflect 性能
- [16] 基于HTTP缓存轻松实现客户端应用的离线支持
- [16] osx平台上lol英雄联盟launcher启
- [16] 公钥私钥加密解密数字证书数字签名详解
- [14] 我的git笔记
- [13] 在JavaScript中什么时候使用==是正
- [13] Linux内存中的Cache真的能被回收么?
- [12] Joomla反序列化漏洞的查漏补缺
- [11] SSL多域名绑定证书的解决方案
- [11] 正态分布的前世今生(一)