css - 图像顶部的按钮(但它不会停留)

Question

编辑我的原始帖子---

我有一张图片，其中的文字制作成图片，图片上有一个按钮，该按钮不会留在原地以进行响应式滚动。

所以我只放了图片，将文本设置为 div。我已将我的图像设置为相对的，将文本设置为绝对的。 ？？？现在我无法在我的巨型图像上获取我的文本 div，我对此感到非常厌倦。 (我还需要文本背后的透明度，但也放弃了定位。)

HTML

<div class="w3-jumboimagecontainer> 
<div class="w3-display-container w3-jumboimage w3-center">
<img src="images/assistingelder.jpg" style="width:100%"></div>
<h5 class="ontop">
<h5 class="jumbonow">Now hiring</h5> <h5       
class="caregiversnow">Caregivers</h5> 
<h5 class="birminghamnow">in the Birmingham area</h5></h5>
<div class="w3-jumbotextsquare"">
<div class="w3-jumbobutton w3-button w3-xlarge w3-center">
<a href="caregiversapp.html" class="w3-button w3-xlarge">apply now! 
</a></div></div></div></div>

CSS

.w3-jumboimagecontainer {width: 100%;}
.w3-jumboimage {position: relative;}
h5.ontop {position: absolute;}
.w3-jumbobutton .w3-button {
background-color: #d7d78f;
border-color: #d7d78f;
color: #FFF; 
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 1px;
object-position: center;
}
h5.jumbonow {font-family: "proxima-nova"; helvetica; arial; sans-   
serif;
font-weight: 200;
font-style: normal;
font-size: 50pt;
letter-spacing: 2px;
text-transform: uppercase;
color: white;
text-align: center;
top:0px;}
h5.caregiversnow {
font-family: georgia; serif;
font-weight: 300;
font-style: italic;
text-transform: uppercase;
font-size: 60pt;
letter-spacing: 2px;
color: white;
text-align: center;
margin-top:px;}
h5.birminghamnow {font-family: "proxima-nova"; helvetica; arial;   
sans-serif;
font-weight: 100;
font-style: normal;
font-size: 30pt;
letter-spacing: 2px;
color: white;
text-align: center;
margin-top:px;}

Answer 1

它飞走的原因是 left:630px; 是绝对的。这意味着当屏幕变小时，630px 将不再居中。

要解决这个问题，请使用相对单位。有很多方法可以在 css 和 howtocenterincss.com 中居中。在为您提供所需的 CSS 方面做得很好。

或者 left: 50%; transform: translate(-50%, 0); 应该有效。

请注意，bottom 也是如此，但在这里它可能不是问题。

---

但是，由于您的图像上也有文字，因此在制作按钮位置时考虑到这一点可能会更好。

基本上为两者制作一个包装:文本和按钮，并将该包装对齐到图像的中间。然后按照您希望的方式布置它们。