DIV盒子居中问题

最新推荐文章于 2023-09-20 13:51:42 发布

浪潮博

最新推荐文章于 2023-09-20 13:51:42 发布

阅读量785

点赞数

分类专栏： CSS学习计划 HTML学习计划文章标签： html-div

本文链接：https://blog.csdn.net/kda_123/article/details/62898909

版权

HTML学习计划同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS学习计划

0 篇文章 0 订阅

订阅专栏

DIV盒子居中显示

代码：

<head>
    <style type="text/css">
        .nav{
                margin:0 auto; <!--上边距为0 左右居中-->
            }
    </style>
</head>
<body>
    <div class="banner">
        <div class="nav">
        </div>
    </div>
</body>

DIV定位盒子居中显示

代码：

<head>
    <style type="text/css">
        .banner{
                position:relative; <!-- 父元素相对定位 -->
                }
        .nav{
                width:500px; 
                position:absolute; <!-- 子元素绝对定位 -->
                left:50%;  <!--子元素的左侧边 在浏览器中线处-->
                margin-left:250px; <!--子元素向左侧移动整体一半的距离  实现居中-->
            }
    </style>
</head>
<body>
    <div class="banner">
        <div class="nav">
        </div>
    </div>
</body>

浪潮博

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DIV盒子居中问题

DIV盒子居中显示代码：<head> <style type="text/css"> .nav{ margin:0 auto;  } </style></head><body> <div class="banner"> <div class="nav"
复制链接

扫一扫