我有一个复杂的案例。但对您来说可能并不复杂。
我有一个名为的模块catsocial
,该模块将在一行中包含四个具有特定尺寸(300x400)的社交媒体图像,该图像应为网站宽度的100%。每个25%,因此4个DIV将是100%。
这些“图像”中的每一个都放置在名为catig
Instagram,catyt
YouTube等的模块中。
内部社交媒体模块我想有个人形象,这将填补DIV与width: 100%
和height: 100%
该图像的。因为我在这里进行了很多搜索,所以我发现唯一的方法是将一个具有指定尺寸的图像放入DIV内,然后完全适合我的DIV。
我解决了这个问题。但是,我必须把一个链接<a href=""></a>
,这将与该主DIV满足(这里catig
)也有width: 100%
和height: 100%
该DIV的,但过度的图像。
另一个问题是此链接(位于DIV:内catigbut
)应仅在悬停时显示。
最后一个问题是,文本(此处为INSTAGRAM
)应在垂直和水平方向上居中。
我有一个代码,图像正常显示,catigbut
正常显示带也width: 100%
和height: 100%
该DIV的,但遗憾的是我不能垂直放置INSTAGRAM
在该专区文字了...
.catsocial {
margin: 50px 0;
}
.catig {
width: 25%;
float: left;
background-repeat: no-repeat !important;
background-size: 100% auto !important;
position: relative;
}
.catigimg {
width: 100%;
}
.catigbut {
position: absolute;
top: 0px;
left: 0px;
text-align: center;
width: 100%;
height: 100%;
}
.catigbutlink {
width: 100%;
height: 100%;
vertical-align: middle;
display: inline-block;
}
<div class="catsocial">
<div class="catig">
<img class="catigimg" src="https://butterflyplace-ma.com/img/Monarch.png" />
<div class="catigbut">
<a href="#" class="catigbutlink" target="_blank">
<h4 class="catigbutlinktitle">INSTAGRAM</h4>
</a>
</div>
</div>
<div class="catig">
<img class="catigimg" src="https://butterflyplace-ma.com/img/Monarch.png" />
<div class="catigbut">
<a href="#" class="catigbutlink" target="_blank">
<h4 class="catigbutlinktitle">INSTAGRAM</h4>
</a>
</div>
</div>
</div>
我将非常感谢您的帮助-如何使此文本垂直居中。但是,如果代码中存在任何错误,请让我知道,因为我考虑了3天多,找不到解决方案...
设置位置:的绝对值,.catigbutlink
并尝试transform
用于垂直对齐中心。对于悬停,请设置opacity:0
默认值,然后将其设置opacity:1
为悬停
body {
font: 13px Verdana;
}
.catsocial {
margin: 50px 0;
}
.catig {
width: 25%;
float: left;
background-repeat: no-repeat !important;
background-size: 100% auto !important;
position: relative;
}
.catigimg {
width: 100%;
}
.catigbut {
position: absolute;
top: 0px;
left: 0px;
text-align: center;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all .3s ease;
}
.catigbutlink {
top: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: #ff000069;
margin: auto;
display: flex;
}
.catig:hover .catigbut {
visibility: visible;
opacity: 1;
}
.catigbutlink h4 {
margin: 0;
color: white;
margin: auto;
}
<div class="catsocial">
<div class="catig">
<img class="catigimg" src="https://butterflyplace-ma.com/img/Monarch.png" />
<div class="catigbut">
<a href="#" class="catigbutlink" target="_blank">
<h4 class="catigbutlinktitle">INSTAGRAM</h4>
</a>
</div>
</div>
<div class="catig">
<img class="catigimg" src="https://butterflyplace-ma.com/img/Monarch.png" />
<div class="catigbut">
<a href="#" class="catigbutlink" target="_blank">
<h4 class="catigbutlinktitle">INSTAGRAM</h4>
</a>
</div>
</div>
</div>
我希望这能帮到您!
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句