0

我希望我的左右内容在网页上放大 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+鼠标滚动）时，左右文本不再位于中心，因为它以某种方式向左推。

有人能帮我做吗？感谢您的帮助。我试过 width:% 也不起作用，有人说需要在@media 中完成。

4

2 回答 2

0

这是正常行为...

您的两个 div 彼此相对靠近。如果他们不能将一个放在另一个旁边，那么第二个将重新定位在第一个下面......

如果你真的想让它在 500% 缩放上工作，你可以做的是：

  1. 调整 div 的大小（示例）
  2. 使用 % 宽度（示例 2）

我个人会选择我的第二个例子。选择虽然是你的（总是取决于你为什么需要实现这一点）

PS：% 宽度不起作用，因为您display:table;在#outerdiv上使用

于 2013-09-12T05:17:10.193 回答
0

这不是问题，甚至不是错误，它只是浏览器的正常行为。缩放太大而无法保持一致性。在这种情况下，我认为 400% 是最大值。如果您在 FireFox 中尝试，您将不会遇到此问题，因为它不会达到 500%。

关注放大网页是一件好事，但 500% 对任何页面都无法正常工作来说太过分了。

于 2013-09-12T04:54:55.963 回答