gpt4 book ai didi

html - 500% 缩放 : content center 3

转载 作者:行者123 更新时间:2023-11-28 12:22:43 24 4
gpt4 key购买 nike

我想在网页上放大 500% 以上后让我的左右内容居中,我已经尝试了很多方法,但仍然没有答案,请任何人帮我一下。

复制粘贴制作新网页,在fiddle或者codewall上粘贴是看不到的。

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 中完成。

最佳答案

这是正常行为...

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

如果你真的想让它在 500% 缩放下工作,你可以做的是:

  1. 调整你的div (example)
  2. 使用百分比宽度 (example2)

就我个人而言,我会使用第二个示例。尽管选择权在您手中(始终取决于您需要实现此目标的原因)

PS:% 宽度不起作用,因为您在 #outer div 上使用 display:table;

关于html - 500% 缩放 : content center 3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18755207/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com