在我的网站中，我创建了一个div标签，并将其背景设置为图像，并且每当将图像悬停时，颜色就会变暗。现在，我还希望在悬停图像时，文本在水平和垂直居中显示。我试图添加文本，但是文本甚至没有出现在图像上。
这是我的HTML：
<div id="countries-hitched-div">
<h1> Places Hitched </h1>
<div id="first" class="image">
<h1 id="first-text"> India </h1>
<div class="overlay"></div>
</div>
</div>
这是我的CSS：
#first {
background: url('Images/Home Page/first-quote-image-final.jpg');
position: relative;
}
.image {
width: 500px;
height: 500px;
position:relative;
}
.image:hover > .overlay {
width:100%;
height:100%;
position:absolute;
background-color:#000;
opacity:0.5;
}
#first-text {
position: absolute;
color: black
}
在中进行更改#first-text：
.image:hover #first-text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 50px;
text-align: center;
}
您将获得相对元素内部居中的绝对元素（垂直和水平）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句