字体大小变化时保持Div内容居中且两列无换行紧凑排列

以下是调整后的代码，可满足字体大小为9px或28px时的布局需求：

修改后的CSS #

.wpwi_main {
    border: 1px solid aliceblue;
    border-radius: 5px;
    font-size: 28px; /* 可改为9px测试效果 */
    padding: 10px; /* 避免内容紧贴边框 */
    text-align: center; /* 让内部容器自动居中 */
}

.wpwi_top {
    margin-bottom: 15px;
}

.wpwi_outer {
    padding-bottom: 20px;
}

.wpwi_inner {
    display: inline-table; /* 宽度随内容自适应 */
    border-collapse: separate;
    border-spacing: 15px 5px; /* 控制列间距和行间距，可按需调整 */
}

.wpwi_row {
    display: table-row;
}

.wpwi_row > div {
    display: table-cell;
    white-space: nowrap; /* 强制内容不换行 */
}

.wpwi_row > div:first-child {
    text-align: right; /* 左列标签右对齐，视觉更整齐 */
}

.wpwi_row > div:last-child {
    text-align: left; /* 右列数值左对齐 */
}

修改后的HTML（结构保持不变） #

<div class="wpwi_main">
    <div class="wpwi_top">Top</div>
    <div class="wpwi_outer">
        <div>Outer</div>
    </div>
    <div class="wpwi_inner">
        <div class="wpwi_row">
            <div>Time</div>
            <div>8:02 PM</div>
        </div>
        <div class="wpwi_row">
            <div>Date</div>
            <div>13 Aug 2022</div>
        </div>
        <div class="wpwi_row">
            <div>Pressure</div>
            <div>999 hPa</div>
        </div>
        <div class="wpwi_row">
            <div>Visibility</div>
            <div>10000 Meter</div>
        </div>
        <div class="wpwi_row">
            <div>Cloudiness</div>
            <div>98%</div>
        </div>
        <div class="wpwi_row">
            <div>Sunrise</div>
            <div>5:37 AM</div>
        </div>
        <div class="wpwi_row">
            <div>Sunset</div>
            <div>6:39 PM</div>
        </div>
    </div>
</div>

核心调整说明 #

1. 自适应居中：将.wpwi_inner改为inline-table，配合.wpwi_main的text-align: center，让内容容器随内容宽度自适应，同时自动居中，避免固定宽度导致的布局失衡。
2. 强制不换行：给单元格添加white-space: nowrap，确保无论字体大小如何，内容都不会折行，维持两列结构。
3. 灵活间距：用border-spacing替代固定宽度控制列、行间距，既能保持紧凑布局，又能适配不同字体大小的视觉需求。
4. 对齐优化：左列标签右对齐、右列数值左对齐，让排版在任何字体大小下都保持整齐。

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