gpt4 book ai didi

css - 垂直居中百分比

转载 作者:行者123 更新时间:2023-11-28 18:36:41 25 4
gpt4 key购买 nike

我正在尝试将一 block 动态高度居中。我遵循了 Vanseo Design 的指南,并以负边距实现了解决方案。经过一段时间的调整后,我让它在 Chrome 中工作,但在 IE 和 Firefox 中尝试时,负边距已经消失了! Chrome 和 Safari 会按预期处理该位置,但 IE 和 FF 不会。如果只有 IE,我本可以完成经典的 IE-CSS-hack,但也有 Firefox 的组合......有人知道如何使用动态元素获得垂直中心以在所有浏览器中工作吗?

来自 Chrome/Safari 的屏幕截图(正确):

来自 Firefox/IE 的屏幕截图(错误):

<!DOCTYPE html>
<html>
<head>
<title>Dead Centre</title>

<style type="text/css" media="screen"><!--
body
{
color: white;
background-color: #000;
margin: 0px
}

#content
{
position: absolute;
top: 50%;
left: 0%;
height: 64%;
width: 100%;
margin-top: -32%;
text-align:center;
background-color:#339;
}

--></style>
</head>

<body>
<div id="content">
<div class="bodytext">This box should be centered vertically</div>
</div>
</body>
</html>

最佳答案

好吧,你为你的元素设置了 64% 的高度,所以让垫子 :)100-68 = 36 ,., 所以只剩下 36%。

然后除以 2 得到 18

通过将您的内容 ID 放在距离顶部 18% 的位置并移除边距,一切都会正常进行。 :)

#content
{
position: absolute;
top: 18%;
left: 0%;
height: 64%;
width: 100%;
text-align:center;
background-color:#339;
}

关于css - 垂直居中百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12494974/

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