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也是如此，但这里可能不是问题。

但是，由于您的图像上还有文字，因此最好将按钮放在第一位。

基本上围绕两者包装：文本和按钮，并将该包装器对齐在图像的中间。然后按照你想要的方式把它们放好。

图像顶部的按钮（但它不会保持不变）

1 个答案: