如何使nums中的div精确对齐到dates对应div的正下方中间

要让nums里的每个数字精确对应到dates中日期的正下方中间，且不依赖固定margin/left/right像素值，有两种可靠方案：

方案一：重构HTML结构（推荐） #

把每个日期和对应的数字放在同一个父容器里，数字可自适应日期宽度居中，逻辑清晰且适配性强。

修改后的代码：

.date-num-group {
    display: inline-block;
    text-align: center;
    margin-left: 20px;
}
.date-num-group .num {
    margin-top: 8px; /* 调整日期与数字的垂直间距 */
}

<body>
    <div class="container">
        <div class="date-num-group">
            <div class="date">Aug 5</div>
            <div class="num">9</div>
        </div>
        <div class="date-num-group">
            <div class="date">Aug 6</div>
            <div class="num">7</div>
        </div>
        <div class="date-num-group">
            <div class="date">Aug 7</div>
            <div class="num">5</div>
        </div>
        <div class="date-num-group">
            <div class="date">September 12</div>
            <div class="num">3</div>
        </div>
    </div>
</body>

方案二：不修改原有HTML，用CSS Grid实现对齐 #

通过Grid布局让dates和nums共享完全一致的列宽度，对应位置元素自动对齐，无需手动调整间距。

修改后的CSS代码：

#dates, #nums {
    display: grid;
    grid-template-columns: repeat(auto-fit, max-content);
    gap: 20px; /* 替代原margin-left，控制元素横向间距 */
}
#nums {
    margin-top: 8px; /* 调整日期与数字的垂直间距 */
}
#nums div {
    text-align: center; /* 让数字在对应列中居中 */
}

原HTML保持不变即可。

两种方案均能自动适配内容宽度变化，无论日期或数字内容修改，都能维持精确的上下对齐。

内容的提问来源于stack exchange，提问作者Mehan Alavi