技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> CSS 水平居中之相对定位与负边距法

CSS 水平居中之相对定位与负边距法

浏览:1661次  出处信息
CSS水平居中的方法有很多。现在最常用的大概就是margin加上text-align的组合了。

不过条条大道通罗马,条条小路通我家。今天还看到一个使用相对定位与负边距来使元素水平居中的方法。之前咋没玩过,乍一看还挺不理解。后来自己捉摸了一会儿,还画了两张图,终于理解了。-_-!!!

大家先来看代码,然后再看图:

以下是代码片段:
<!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技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1