利用div绘制细线居中

最新推荐文章于 2023-07-14 13:32:49 发布

weixin_30788619

最新推荐文章于 2023-07-14 13:32:49 发布

阅读量224

点赞数

原文链接：http://www.cnblogs.com/xiaolantian/p/8044202.html

版权

利用div配合css代码实现细线方式:

块级元素水平居中步骤：

设置宽度width
设置margin-left:auto;
设置margin-right:auto;

实现方法是，让其左右两边的外边距自动计算，达到水平居中的效果，因为块级元素默认占一整行的特性，所以需要设置width宽度才能实现

复合写法：margin:0 auto;第一个值为上下外边距0(因为值是0就是无，所以带不带单位都无所谓了),第二个值为左右外边距自动计算

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
           <meta charset="UTF-8" />
           <title>div细线实现margin居中算法</title>
           <style>
                *{margin:0px;padding:0px;}
                .fu_ji{height:200px;margin-top:99.5px;}
                .xi_xian{height:1px;border-top:1px solid #ddd;}
            </style>
    </head>
    <body>
    <div class="fu_ji">
        <div class="xi_xian"></div>
    </div>
    </body>
</html>

margin居中算法：想要居中的高度减去父级的高度再/2 比如我这里的例子-算式：200-1/2，200是父级的，1是子级的

转载于:https://www.cnblogs.com/xiaolantian/p/8044202.html

weixin_30788619

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用div绘制细线居中

利用div配合css代码实现细线方式:块级元素水平居中步骤：设置宽度width设置margin-left:auto;设置margin-right:auto;实现方法是，让其左右两边的外边距自动计算，达到水平居中的效果，因为块级元素默认占一整行的特性，所以需要设置width宽度才能实现复合写法：margin:0 auto;第一个值为上下外边距0(因为值是0就是无，所以...
复制链接

扫一扫