html - 该框未居中,并且还与它一起移动背景图像
问题描述
我想在网页上将黑框居中,但是每当我尝试调整黑框#banner_image
的填充时,就会开始上下移动,每当我尝试调整包含黑框的边距以使其居中时,bg 图像就会开始滚动。#banner_content
我无法理解这里发生了什么,有人可以解释一下吗?
#banner_image{
background: url(../Images/intro-bg_1.jpg) no-repeat center center;
padding-top: 10%;
padding-bottom: 25%;
text-align: center;
color: #f8f8f8;
background-size: cover;
}
#banner_content{
background-color: rgba(0, 0, 0, .7);
max-width: 660px;
position: relative;
padding-top: 6%;
padding-bottom: 6%;
margin-top: 6%;
margin-bottom: 6%;
margin-left: auto;
margin-right: auto;
}
<div id="banner_image">
<div class="container">
<div id="banner_content">
</div>
</div>
</div>
解决方案
<style>
#banner_image{
background: url(./bg.jpg) no-repeat center center;
/* Adjust the values as you need them */
width: 100vw;
height: 100vh;
text-align: center;
color: #f8f8f8;
background-size: cover;
}
/* Use the container to center the black box */
.container {
position: relative;
/* Adjust values to what you need. Remember to always have a set width and height if you want your elements to not move around the page and cause cumulative layout shift problems */
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#banner_content{
background-color: rgba(0, 0, 0, .7);
min-width: 400px;
min-height: 400px;
}
</style>
<div id="banner_image">
<div class="container">
<div id="banner_content">
</div>
</div>
</div>
推荐阅读
- r - 如何解决在CVXR中具有不同基数的指数项的目标函数?
- r - 如何重命名在 r 中使用 str_detect 找到的列?
- python - Python Tkinter 和 Sqlite 出现操作错误,但我完全按照教程进行操作
- c# - C#问题中的斑马打印机批量打印
- nginx - 错误:getaddrinfo ENOTFOUND ingress-nginx.ingress-nginx-controller.svc.cluster.local
- django - 如何改进保存表单的方法
- php - 如何从在线共享点 url 获取文档 uri?
- omnet++ - 在 Omnet++ 中定义和获取/设置全局变量或类类型变量
- apache-flink - 多个 FlinkKinesisProducer 作为数据流的接收器
- python - 如何通过循环创建变量