1

我有一个使用 HTML 和 CSS ( jsfiddle ) 居中内容的简单示例。截图如下：

未缩放的内容

HTML：

<body class="" lang="en-US">
    <div class="wrapper">
        Some stuff
    </div>
</body>

CSS：

html 
{
    background: lightgray; /* Background color of whole window */
    border: 2px solid orange; /* Debug */
    width: 20em; /* The width of the content */
    margin: 2em auto;
}

body
{
    border: 2px solid purple;
}

.wrapper
{
    background: lightgray; /* Background color of whole window */
    border: 2px solid orange; /* Debug */
}

当我使用浏览器缩放进行放大时，内容会在您放大时保持在左侧：

缩放内容

我希望发生的是缩放时窗口中间的内容：

所需的缩放结果

有没有一种简单的方法可以使用 CSS 来做到这一点。如果可能的话，我不想使用 jquery 或任何其他方式。

正如@Mr Lister 指出的那样更新，this "problem" has nothing top do with zoom. The very same thing happens if the user makes the window narrower until the horizontal scrollbar appears. Are you saying you want the scrollbar to automatically go to the center then too? That would require Javascript

我不认为我会想要那个。看起来用户体验可能有点奇怪。我不想强迫它一直在中心，不允许他们移动到页面的其他部分。只需在水平滚动条第一次出现和随后的放大时保持居中即可。如果用户在缩放时更改滚动条的位置，则不需要在后续缩放中重新定位。这只是初始滚动条显示的更多内容。希望这是有道理的。它的“对与错”是否可以争论，但这就是我想要的。如果您需要进一步说明，请告诉我

4

1 回答 1

0

根据我的经验，一个坚如磐石的解决方法如下：

.wrapperDiv {
    text-align:center;
}

.centeredDiv {
    width: /*define yours*/ px;
    display:inline-block;
}

谨慎使用

于 2013-07-19T20:01:40.027 回答