Question

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

可以帮助我做到吗？谢谢你的帮助。我曾尝试过宽度：％也不起作用，有人说它需要在@media中完成。

Answer 1

这不是问题，甚至是错误，只是浏览器的正常行为。这是太多的缩放以保持任何一致性。我认为400％是这种情况下的最大值。如果你在FireFox中试用它，你就不会遇到这个问题，因为它不会达到500％。

关注网页缩放是非常好的，但500％对于任何页面工作来说都太过分了。

Answer 2

这是正常行为......

你的两个div位于彼此相对的位置。如果它们不能与另一个相邻，那么第二个将自己重新定位在第一个......

之下

如果你真的想让它在500％变焦上工作，你可以做的是：

调整div的大小 (example)
使用％widths (example2)

就个人而言，我会选择第二个例子。选择虽然是你的（总是取决于你需要实现的原因）

PS：由于您在display:table; div

#outer

500％缩放：内容中心3

2 个答案: