500%变焦:内容中心3
我想我的左右内容是集中后，放大500%以上的网页，我已经尝试了这么多的方式，但仍然没有答案，谁能在这里帮助我一下。
复制和粘贴来创建一个新的网页，你不能看到你是粘贴在小提琴或代码墙。
html：
<body>
<div id="lower_body">
<h1>center content</h1>
<div id="outer_warpper">
<div id="outer">
<div id="left"><h1>left</h1></div>
<div id="right"><h1>right</h1></div>
</div>
</div>
</div>
</body>CSS：
#lower-body {
margin: 0px;
padding: 0px;
}
#outer_warpper {
width: 100%;
height: 100%;
margin: 0px;
padding-top: 2%;
padding-bottom: 2%;
background-color: yellow;
overflow: hidden;
}
#outer {
background-color: black;
text-align: center;
vertical-align: middle;
display: table;
margin:0px auto;
overflow: hidden;
}
#right {
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: red;
}
#left{
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: grey;
}
img{
widht:100%;
height:100%;
}
h1{
text-align: center;
}正如您可以看到的，当它达到500% (ctrl+mouse滚动)，左和右文本不再在中间，因为它推往左。
有人能帮我做到吗？谢谢你的帮助。我试过宽度：%也不工作，有人说需要在@media中完成。
回答 2
Stack Overflow用户
发布于 2013-09-12 05:17:10
这是正常的行为..。
你的两个div位置相对相邻。如果他们不能适应旁边的一个，那么第二个将自己重新定位在第一个.
如果你真的想让它在500%的缩放上工作，你可以做的是：
- 调整div (例如)的大小
- 使用%宽度(example2)
就我个人而言，我会提出我的第二个例子。然而，选择是你的(取决于你为什么要做到这一点)。
PS：% width无法工作，因为您在#outer div上使用了#outer
Stack Overflow用户
发布于 2013-09-12 04:54:55
这不是问题，甚至不是错误，这只是浏览器的正常行为。这是太大的缩放，以保持任何一致性。我认为400%是这种情况下的最大值。如果您在FireFox中尝试它，您将不会得到这个问题，因为它不会持续到500%。
关注网页的缩放是很好的，但是对任何网页来说，500%的比例太高了。
https://stackoverflow.com/questions/18755207
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号