我有两个这样的 div:
<div id="splash-container">
<video id="splash-video" preload autoplay loop muted>
<source src="videos/splash.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div id="splash-message">MAYUR BHADRACANT</div>
<div id="splash-submessage">ONLINE PROFILE</div>
</div>
我希望启动消息显示在启动子消息之上,如下所示: http://prntscr.com/bcxu1r
但是当我调整浏览器大小时:会发生这种情况: http://prntscr.com/bcxuec
我现在的 CSS 是:
#splash-container {
position: relative;
overflow: hidden;
width: 100vw;
max-width: 100%;
min-height: 100px;
text-align: center;
margin: 0 auto;
}
#splash-message {
position: absolute;
font-weight: bold;
z-index: 1;
color:white;
font-weight: 300;
letter-spacing: 7px;
left: 0;
width: 100%;
text-align: center;
font-size: 35.5px;
top:40vh;
}
#splash-submessage {
position: absolute;
color: white;
z-index: 1;
font-weight: 300;
letter-spacing: 7px;
left: 0;
width: 100%;
text-align: center;
font-size: 22px;
top:50vh;
}
感谢任何帮助,谢谢!
最佳答案
使用 Flexbox
,您可以将 message
和 submessage
居中,并且可以在 上使用 position: absolute
video 将其从元素流中移除,然后使用 transform: translate()
将其居中。
body,
html {
margin: 0;
padding: 0;
}
#splash-container {
display: flex;
height: 100vh;
flex-direction: column;
position: relative;
align-items: center;
justify-content: center;
}
video {
border: 1px solid black;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<div id="splash-container">
<video id="splash-video" preload autoplay loop muted>
<source src="videos/splash.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div id="splash-message">MAYUR BHADRACANT</div>
<div id="splash-submessage">ONLINE PROFILE</div>
</div>
关于html - 如何使这两个带有文本响应的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37654484/