Angular 2+中CSS实现多列表头屏幕居中及响应式两侧留白

我来帮你搞定这个响应式导航栏的问题！核心是用CSS媒体查询+自动外边距实现不同屏幕下的均等留白，同时优化网格布局保证内部排版整齐。

解决方案思路 #

要满足你的需求，需要做到两点：

• 让.small_wrapper1容器水平居中，且两侧留白随屏幕尺寸精准变化
• 让内部导航项的网格布局在不同屏幕下保持良好的排版，避免拥挤或溢出

修改后的完整代码 #

CSS部分

/* 基础样式：默认居中+基础布局 */
.small_wrapper1 {
    z-index: 1000;
    font-size: 16px;
    position: -webkit-sticky;
    position: sticky;
    top: 85px;
    color: rgb(215,193,179);
    box-shadow: 0 7px 12px rgb(3, 3, 3);
    background-color: rgb(225, 233, 255);
    /* 核心：水平居中，默认边距适配多数屏幕 */
    margin: 0 auto;
    /* 用calc计算最大宽度，实现两侧均等留白 */
    max-width: calc(100% - 200px);
    /* 优化网格布局：让列自适应分配宽度 */
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 30px;
    grid-gap: 5px;
    /* 网格内容居中对齐，提升视觉效果 */
    place-items: center;
}

/* 媒体查询：641px及以上屏幕，两侧各留100px边距 */
@media (min-width: 641px) {
    .small_wrapper1 {
        max-width: calc(100% - 200px);
    }
}

/* 媒体查询：320px-640px屏幕，两侧各留50px边距 */
@media (min-width: 320px) and (max-width: 640px) {
    .small_wrapper1 {
        max-width: calc(100% - 100px);
        /* 小屏幕缩小字体，避免内容拥挤 */
        font-size: 14px;
    }
}

/* 可选：针对小于320px的极小屏幕，进一步缩小边距 */
@media (max-width: 319px) {
    .small_wrapper1 {
        max-width: calc(100% - 40px);
        font-size: 12px;
    }
}

HTML部分（修正原代码语法错误）

<div class="wrapper">
    <div class="small_wrapper1">
        <div class="header1">Rank</div>
        <div class="header2">Grade</div>
        <div class="header3">Name</div>
        <div class="header4">Price</div>
        <div class="header5">Market Cap</div>
        <div class="header6">change(24hr)</div>
        <div class="header61">(24hr)</div>
        <div class="header7">change(7d)</div>
        <div class="header71">(7d)</div>
        <div class="header8"></div>
    </div>
    <ol style="color:rgb(0, 27, 87)">
        <div class="arrayOfGrade" *ngFor="let key of arrayOfGradedCoins; let i = index">
            <div class="small_wrapper">
                <div class="column1">test</div>
                <div class="column2">test2 </div>
                <div class="column3">test3</div>
                <div class="column4">test4</div>
                <div class="column5">test5</div>
                <div class="column6"></div>
                <div class="column7"></div>
            </div>
        </div>
    </ol>
</div>

关键细节说明 #

1. 水平居中与留白控制

   • margin: 0 auto是块级元素水平居中的经典方案，配合max-width: calc(100% - 2*边距)，能精准实现两侧均等留白（比如calc(100% - 200px)就对应两侧各100px）。
   • 使用max-width而非固定width，可以保证容器在大屏幕下不会无限拉伸，小屏幕下自动适配宽度。

2. 媒体查询断点适配

   • 针对你提到的320px、641px设置了断点，你可以根据实际需求调整这些数值。每个断点下单独控制边距和字体大小，确保小屏幕下内容不拥挤。

3. 网格布局优化

   • 把原代码中错误的网格列写法改成repeat(8, 1fr)，让8个导航列平分容器宽度，自适应不同屏幕尺寸。如果需要固定某些列的宽度，可以改成混合写法，比如25px 25px repeat(4, 1fr) 50px。
   • 添加place-items: center让网格内的文字居中对齐，提升整体视觉一致性。

这样调整后，你的导航栏就能在各种屏幕下保持居中，两侧留白均等，同时内部排版也能完美适配不同设备啦！

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