水平滚动条时居中内容

Question

我正在设计一个自适应 html 模板，该模板应该可以在桌面和移动浏览器上使用。在内容中，我有一个固定的 table，它使用 media-query 缩小其 font-size（标题和单元格）直到某个限制。低于该限制，table 太密集以至于无法在该字体大小下阅读，因此我们宁愿保留它，即使它有点超出移动浏览器的可见部分。

对于大多数移动设备和台式机来说，这不是问题，因为内容与中心对齐，并且有一个水平滚动条用于查看视口外的 table 部分。

但是 iPhone 上的 Safari 会尝试将所有内容都放入可见区域，实际上是将内容移到左侧并在右侧留下一个大的空白区域，以适应 table。

在下图中，橙色矩形表示视口，绿色矩形表示内容，"Div" 矩形表示 table 不适合视口。请注意，在左侧图像中，超出的 Div 部分不可见（我对这个解决方案很好）。

如何才能在css中始终得到左边图片的效果？

这些是 html 的相关部分：

<body>
    <div class="container">
        <div class="row section">
            <div class="col content">
                <table width="100%">
                    <tbody>
                        <tr>
                            <td rowspan="2">
                                <div align="center" class="Style1">
                                    title
                                </div>
                            </td>
                            <!-- Many Other <td></td> HERE -->
                        </tr>
                        <!-- Many Other <tr></tr> HERE -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

和Css：

/*Grid System*/
.col {
    padding: 0 1.5em;
}
.row .row {
    margin: 0 -1.5em;
}
.row:before, .row:after {
    content: "";
    display: table;
}
.row:after {
    clear: both;
}
@media only screen {
    .col {
        float: left;
        width: 100%;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
}


/* Mobile really small dispalys */
@media only screen and (min-width: 2em) {

    table {
        font-size: 0.4em;
    }

}

/*Mobile normal diaplay*/
@media only screen and (min-width: 12em) {

    p, ul {
        font-size: 0.875em;
    }

    table {
        font-size: 0.7em;
    }

    .feature:first-child,
    .info:first-child {
        border-right: 1px dotted #aaa;
    }

    .container {
        padding: 1em;
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.625em;
    }

}

/*Tablets*/
@media only screen and (min-width: 54em) {
    .content {
        border: none;
        margin-bottom: 0;
        /*border-left: 1px dotted #aaa;*/
    }

    .info:first-child {
        border: none;
    }

    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 1.8em;
    }
}

/*Desktop*/
@media only screen and (min-width: 76em) {
    .info:first-child {
        border-right: 1px dotted #aaa;
    }

    h1 {
        font-size: 3em;
    }

    h2 {
        font-size: 2em;
    }
}

/* General styles*/
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
}

.container {
    margin: 0 auto;
    max-width: 90em;
    padding: 1em 0;
}

.row.section {
    margin-bottom: 4em;
}

.content {
    margin-bottom: 1.5em;
}

Answer 1

您可能需要为您的元素设置最小宽度

Answer 2

设置就足够了：

.container {
    overflow: auto;
}

水平滚动条时居中内容

Center Content when Horizontal ScrollBar

html

css

mobile-safari

ios