如何在小屏幕上将内部div水平居中时使其成为中心

Question

当屏幕很宽时，我有4个div（每个计数器）彼此相邻。当屏幕变小时，它们堆叠在一起但是它们对齐到右边

我希望它们始终居中，当它们是4行，2行，2行，1行4行。

我该怎么做到这一点？数字可能会改变，并使div的宽度变量

看看这里：https://jsfiddle.net/Zivo/gp5wnL9f/1/

body {
    margin: 0;
    --border: 1px solid #cccccc;

}

.numbers {
    font-family: lato;
    font-size: 72px;
    color: #131128;
}

.odometer {
    display: inline-block;
    top: -7px;
}

.suffix {
    float: right
}

.frame {
    transform: translate(-50%);
    left: 50%;
    position: relative;
    border-bottom: var(--border);
    height: 94px;
    overflow: hidden
}

.suffix p {
    margin: 0 5px 0 0;
}

.odometer p {
    margin: 0 0 0 5px;
}

.theme {
    box-sizing: border-box;
    margin: 20px;
    float: left;
}

.hline {
    height: 40px;
    width: 50%;
    border-right: var(--border);
    /*    transform: translateY(-4px);*/
}

.num-title {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    padding-top: 6px;
}

HTML

<body>
    <div class="numbers">
        <!--counter 1 - Sensors-->
        <div class="sensors theme">
            <div class="frame">
                <div class="odometer" odometer-goal="10">
                    <p>0</p>
                </div>
                <div class="suffix">
                    <p>k+</p>
                </div>
            </div>
            <div class="hline"></div>
            <div class="num-title">Sensors</div>
        </div>
        <!--counter 2 - ICO-->
        <div class="sensors theme">
            <div class="frame">
                <div class="odometer" odometer-goal="13">
                    <p>0</p>
                </div>
<!--
                <div class="suffix">
                    <p>k+</p>
                </div>
-->
            </div>
            <div class="hline"></div>
            <div class="num-title">IOC Types</div>
        </div>
        <!--counter 3 - Scanners-->
        <div class="sensors theme">
            <div class="frame">
                <div class="odometer" odometer-goal="550">
                    <p>0</p>
                </div>
                <div class="suffix">
                    <p>k+</p>
                </div>
            </div>
            <div class="hline"></div>
            <div class="num-title">Scanners</div>
        </div>
        <!--counter 4 - Attackers-->
        <div class="sensors theme">
            <div class="frame">
                <div class="odometer" odometer-goal="5">
                    <p>0</p>
                </div>
                <div class="suffix">
                    <p>k+</p>
                </div>
            </div>
            <div class="hline"></div>
            <div class="num-title">Attackers</div>
        </div>
    </div>
    <script type="text/javascript">
        setTimeout(function() {
            let elements = document.getElementsByClassName('odometer');
            for (var i = 0; i < elements.length; i++) {
                let goal = elements[i].getAttribute("odometer-goal");
                elements[i].innerHTML = goal;
            }
        }, 1000);

    </script>
</body>

Answer 1

从你的班级float: left中删除.theme并将以下flex属性添加到.numbers：

display: flex;
flex-wrap: wrap;
justify-content: center;

第一个属性将激活flex布局
如果没有足够的空间，qazxsw poi允许元素行换行
flex-wrap: wrap将使元素居中而不是默认对齐（取决于文本方向）

justify-content: center

body {
    margin: 0;
    --border: 1px solid #cccccc;

}

.numbers {
    font-family: lato;
    font-size: 72px;
    color: #131128;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.odometer {
    display: inline-block;
    top: -7px;
}

.suffix {
    float: right
}

.frame {
    transform: translate(-50%);
    left: 50%;
    position: relative;
    border-bottom: var(--border);
    height: 94px;
    overflow: hidden
}

.suffix p {
    margin: 0 5px 0 0;
}

.odometer p {
    margin: 0 0 0 5px;
}

.theme {
    box-sizing: border-box;
    margin: 20px;
}

.hline {
    height: 40px;
    width: 50%;
    border-right: var(--border);
    /*    transform: translateY(-4px);*/
}

.num-title {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    padding-top: 6px;
}

Answer 2

为了得到你所要求的，将<body> <div class="numbers">  <div class="sensors theme"> <div class="frame"> <div class="odometer" odometer-goal="10"> <p>0</p> </div> <div class="suffix"> <p>k+</p> </div> </div> <div class="hline"></div> <div class="num-title">Sensors</div> </div>  <div class="sensors theme"> <div class="frame"> <div class="odometer" odometer-goal="13"> <p>0</p> </div>  </div> <div class="hline"></div> <div class="num-title">IOC Types</div> </div>  <div class="sensors theme"> <div class="frame"> <div class="odometer" odometer-goal="550"> <p>0</p> </div> <div class="suffix"> <p>k+</p> </div> </div> <div class="hline"></div> <div class="num-title">Scanners</div> </div>  <div class="sensors theme"> <div class="frame"> <div class="odometer" odometer-goal="5"> <p>0</p> </div> <div class="suffix"> <p>k+</p> </div> </div> <div class="hline"></div> <div class="num-title">Attackers</div> </div> </div> <script type="text/javascript"> setTimeout(function() { let elements = document.getElementsByClassName('odometer'); for (var i = 0; i < elements.length; i++) { let goal = elements[i].getAttribute("odometer-goal"); elements[i].innerHTML = goal; } }, 1000); </script> </body>添加到text-align: center;类，并从.numbers类中删除float: left;并将.theme添加到display: inline-block;。

以下是最后的课程：

.theme

如何在小屏幕上将内部div水平居中时使其成为中心

问题描述投票：1回答：2

2个回答

最新问题

如何在小屏幕上将内部div水平居中时使其成为中心

问题描述 投票：1回答：2

2个回答

最新问题

问题描述投票：1回答：2