在小屏幕上相互叠加时如何使内部 div 水平居中

Question

当屏幕为 wide.y 时，我有 4 个 div（每个计数器）彼此相邻当屏幕变小时，它们会堆叠在一起，但会向右对齐

我希望它们始终居中，当它们是 4 排、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

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

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

第一个属性将激活弹性布局
flex-wrap: wrap 允许元素行在没有足够的情况下换行 space
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;
}

<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 2

要获得您要求的内容，请将 text-align: center; 添加到 .numbers class，并从 .theme class 中删除 float: left;并将 display: inline-block; 添加到 .theme 也。

这是最后的 classes:

.numbers {
    font-family: lato;
    font-size: 72px;
    color: #131128;
    text-align: center; /* new */
}

.theme {
    box-sizing: border-box;
    margin: 20px;
    /* float: left; */ /* removed */
    display: inline-block; /* new */
}

在小屏幕上相互叠加时如何使内部 div 水平居中

how to make inner divs horizontally centered when pushed on top of each other on small screens

css

center

alignment