我需要显示一个图像库,其中每个图像上都有一个图标和一个数字。
这些元素位于覆盖层 DIV 内,当鼠标悬停时会显示。
我正在尝试做两件事:
投票 div 应在覆盖 div 内垂直对齐;
我希望心形字体大小根据图像宽度进行调整。
这两个问题能解决吗?
我的代码和JSFiddle Example :
<div class="gallery">
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<a href="#"><i class="fa fa-heart"></i></a>
<span>350</span>
</div>
</div>
</div>
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<a href="#"><i class="fa fa-heart"></i></a>
<span>350</span>
</div>
</div>
</div>
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<a href="#"><i class="fa fa-heart"></i></a>
<span>350</span>
</div>
</div>
</div>
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<a href="#"><i class="fa fa-heart"></i></a>
<span>350</span>
</div>
</div>
</div>
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<a href="#"><i class="fa fa-heart"></i></a>
<span>350</span>
</div>
</div>
</div>
</div>
* {
-webkit-box-sizing: box-model;
-moz-box-sizing: box-model;
box-sizing: box-model;
}
*:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.gallery {
overflow: hidden;
}
.image {
position: relative;
text-align: center;
float: left;
width: 100%;
}
@media screen and (min-width: 600px) {
.image {
width: 50%;
}
}
img {
display: block;
height: auto;
max-width: 100%;
outline: 0;
}
.overlay {
background-color: #404040;
color: #FFFFFF;
display: none;
height: 100%;
font-size: 0.75rem;
padding: 4px;
position: absolute;
top: 0;
overflow: hidden;
width: 100%;
}
.image:hover .overlay {
display: block;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
-webkit-opacity: 0.8;
opacity: 0.8;
}
.vote {
}
.vote a {
text-decoration: none;
}
.vote i {
color: red;
display: block;
line-height: 1.0;
font-size: 8rem;
}
.vote span {
display: block;
font-size: 2rem;
}
最佳答案
您可以像这样将 vote
类居中:
.vote {
position: relative;
top: 50%;
transform: translateY(-50%)
}
参见 http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/了解其工作原理。
缩放字体比较棘手,因为您使用的是 font-awesome。我不认为你可以用 CSS 做到这一点。
这是一个 JavaScript 解决方案,它将字体大小设置为每个图像高度的 30%:
var images= document.querySelectorAll('.image');
for(var i = 0 ; i < images.length ; i++) {
var height= images[i].offsetHeight;
var heart= images[i].querySelector('.fa');
var span= images[i].querySelector('span');
heart.style.fontSize= span.style.fontSize= (height*0.3)+'px';
}
Fiddle
关于html - 垂直居中 div 并调整字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27821191/