问300%变焦:内容中心
EN

Stack Overflow用户

提问于 2013-09-11 07:21:13

回答 1查看 224关注 0票数 0

我想我的左右内容是集中后，放大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+mouse滚动)，左和右文本不再处于中心位置，因为它以某种方式向左推。

谢谢你的帮助。

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-09-11 08:17:28

这是因为您显式地提到了宽度:450 you。您应该在%中定义宽度，或者尝试宽度<450

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18735016

复制

相似问题

问300%变焦:内容中心
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问300%变焦:内容中心EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问300%变焦:内容中心
EN