zoukankan      html  css  js  c++  java
  • 如何让绝对定位的盒子进行水平居中

    通常我们在写轮播的时候,都会涉及到轮播图片下方的小圆点,也就是我们可以选择的小圆点要进行位置上的排版,让它居于盒子的中间下方部分。如下图所示:

    这边就介绍一下这种是怎样来做的。

    html代码:

    <div class="box">


    <ul class="dian">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>

    </div>

    css代码:

    .box{
    800px;
    height:500px;
    background:pink;
    position: relative;
    }

    .dian{
    50px;
    height:10px;
    margin:auto;
    position: absolute;
    /* top:0;*/
    left:0;
    right:0;
    bottom:10px;

    list-style: none;
    }
    .dian li{
    5px;
    height:5px;
    border-radius:50%;
    margin-right:10px;
    float:left;
    background:red;
    }
    .dian li:nth-of-type(1){
    background:green;
    }


    .dian li:nth-of-type(4){
    margin-right:0;
    }

  • 相关阅读:
    关于串联匹配电阻其作用:
    上下拉电阻
    RS232
    常用硬件介绍
    VGA
    JTAG
    [生活]-理财入门
    [Camera] color shading的产生
    [camere] AWB老算法
    Python基础语法知识
  • 原文地址:https://www.cnblogs.com/cswzl/p/7804508.html
Copyright © 2011-2022 走看看