Question

当屏幕较宽时，我有4个div（每个计数器）彼此相邻。屏幕变小时，它们会彼此叠放，但它们会向右对齐

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

我该如何实现？数字可能会改变并使divs的宽度可变

在这里看看： place for 126 32 byte integers

0.01

HTML

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;
}

Answer 1

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

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

第一个属性将激活弹性布局
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;
}

<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

要获得所需的信息，请将<div class="parent"> <div class="child"></div> </div>添加到text-align: center;类中，然后从.numbers类中删除float: left;并将.theme添加到{{ 1}}。

这是最后的课程：

display: inline-block;

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

2 个答案: