gpt4 book ai didi

html - 如何始终使用CSS使div float 在视口(viewport)中心

转载 作者:太空宇宙 更新时间:2023-11-03 22:37:27 25 4
gpt4 key购买 nike

目标是让包含两个图像的 div(在本例中为 willscape-holder)始终 float 在视口(viewport)中间。有没有办法做到这一点,而不必为每种类型的屏幕调整顶部和底部边距的媒体查询?提前感谢您的帮助。

body {
background: url(../images/willscape-bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
/* background-position: center top; */
background-attachment: fixed;
}

.container {
height: 100vh;
}

.willscape-holder {
width: 100%;
max-width: 350px;
margin: 0 auto;
padding: 0 20px;
}

#willscape-logo {
padding: 0 60px;
width: 100%;
}

#willscape-title {
width: 100%;
max-width: 500px;
}
<body>
<div class="container">
<div class="willscape-holder">
<a href="" target="_blank"><img class="img-responsive" id="willscape-logo" src="assets/images/willscape-logo.png" /></a>
<a href="" target="_blank"><img class="img-responsive" id="willscape-title" src="assets/images/willscape.png" /></a>
</div>
</div>
</body>

最佳答案

您可以使用视口(viewport)的高度和 css calc 函数来计算图像的上边距:

.willscape-holder {
width: 100%;
max-width: 350px;
margin: 0 auto;
padding: 0 20px;
margin-top: calc((100vh - 500px) / 2);
}

其中 500 是 2 个框的像素高度。

供引用: https://plnkr.co/edit/c1QenriaFK8KatS02MrE?p=preview

关于html - 如何始终使用CSS使div float 在视口(viewport)中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45687196/

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