Question

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

Unzoomed content

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 */
}

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

Zoomed Content

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

Desired zoom result

使用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

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

Answer 1

根据我的经验，对此的坚定修正将如下：

.wrapperDiv {
    text-align:center;
}

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

谨慎使用

缩放时保持内容居中

1 个答案: