我正在使用一个绝对定位的大型主图,以便在其上放置文本叠加层。我还确保无论屏幕尺寸如何,主图都能响应。我遇到的问题是,无论屏幕尺寸如何,都要确保叠加文本在背景图像中垂直居中。
以下链接显示了我试图通过叠加文本实现的效果:https://www.youtube.com/watch?v=gfzWLbAbcCw
我的jsx代码如下:
<>
<div className="container">
<div className="container-background">
<img
src="https://i.imgur.com/iyFtMNA.jpg"
alt="bg"
className="container-background-img"
/>
</div>
<div className="content">
<Navbar />
<div className="page-outer">
<div className="page-inner">
<div className="wel-top-header">text</div>
<div className="wel-top-middle">
<div style={{ marginTop: -30 }}>text</div>
<div style={{ marginTop: -48 }}>text</div>
</div>
<div className="wel-tagline">
Pagerland offers a great, smooth looking and ultra-fast landing
page templates build on Gatsby and React.
</div>
</div>
</div>
</div>
</div>
</>
我的CSS代码如下:
* {
margin: 0;
padding: 0;
}
.navbar {
height: 80px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
border: solid black 1px;
}
.container {
position: relative;
}
.container .container-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.25;
}
以下链接包含用于调试的代码沙箱! https://codesandbox.io/s/charming-dijkstra-im7nb?file=/src/styles.scss:0-1101
任何和所有的建议将不胜感激
最佳答案
通过给容器而不是 img 赋予固定高度解决了这个问题。不确定这是否会产生任何其他额外问题。
https://codesandbox.io/s/stackoverflow-hill-oyr5l-forked-udlsr?file=/src/styles.scss
关于css - 保持覆盖文本的垂直居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65746457/