Html 如何防止我的网站内容在缩放期间移动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8448039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I keep my website content from moving during zoom?
提问by joepetrakovich
I couldn't think of the right wording for this question, but here is my problem:
我想不出这个问题的正确措辞，但这是我的问题：
When users hit Ctrl+Plus to zoom in on my page, content seems to push each other around. For example, I have a navigation div floating on its own on the top left corner of the page.
当用户按 Ctrl+Plus 放大我的页面时，内容似乎相互推动。例如，我在页面的左上角有一个单独浮动的导航 div。
Then there is main content text that is centered in the page. When the user zooms in, the centered content quickly moves left towards the navigation and eventually starts wrapping around it and it looks awful.
然后是页面居中的主要内容文本。当用户放大时，居中的内容迅速向左移向导航，并最终开始环绕它，看起来很糟糕。
Is there a high-level way that you can describe to me how to structure my page so that zooming keeps things stable and 'just zooms in' without distorting the original positioning?
是否有一种高级方法可以向我描述如何构建我的页面，以便缩放保持稳定并且“只是放大”而不会扭曲原始定位？
回答by Matthew Green
This link from "A List Apart"covers some font sizing and fluid web development. It should give you some good direction of how to structure your page to adapt to changes in font sizes. You may also want to look into media queriesbecause they allow you to apply styles based on certain characteristics of the browser or device.
“A List Apart”中的这个链接涵盖了一些字体大小和流畅的 Web 开发。它应该为您提供一些关于如何构建页面以适应字体大小变化的良好方向。您可能还想查看媒体查询，因为它们允许您根据浏览器或设备的某些特征应用样式。
回答by Isabella Engineer
How to keep code in center on zooming?
如何将代码保持在缩放的中心？
Center the code on zooming?
将代码集中在缩放上？
ANSWER:
< div id="wrapper"> Place this div tag outside the code < /div>
解答：
<div id="wrapper">把这个div标签放在代码外面</div>
#wrapper
{
background-color: #F00;
width: 400px;//This width can be anything according to your need
margin-right: auto;//Note margin-right and left are allocated automatically
margin-left: auto;
}
Another Way
其它的办法
#wrapper
{
background-color: #F00;
width: 400px;
position:relative;
}
