Question

我希望我的左侧内容在网页上放大300％以上后居中，我已经尝试了很多方法，但仍然没有答案，任何人都可以请我帮忙。

复制并粘贴以制作新网页，您无法看到是否粘贴在小提琴或代码墙上。

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;
}
h1{
    text-align: center;
}

当你看到它达到300％或以上时（ctrl +鼠标滚动），左右文字不再在中心，因为它以某种方式向左推动

感谢您的帮助。

Answer 1

发生这种情况是因为你明确提到宽度：450px。您应该以％为单位定义宽度，或者您应该尝试宽度＆lt; 450

300％缩放：内容中心

1 个答案: