Center div vertically and adapt font size - html

Question

I need to display a gallery of images where over each image I have an icon and a number.
These elements are inside an overlay DIV which shows when the mouse is over.
I am trying to do two things:
The vote div should be vertically aligned inside the overlay div;
I would like the heart font size to adapt depending on the image width.
Can these two problems be solved?
My code and JSFiddle Example:
<div class="gallery">
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<i class="fa fa-heart"></i>
<span>350</span>
</div>
</div>
</div>
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<i class="fa fa-heart"></i>
<span>350</span>
</div>
</div>
</div>
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<i class="fa fa-heart"></i>
<span>350</span>
</div>
</div>
</div>
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<i class="fa fa-heart"></i>
<span>350</span>
</div>
</div>
</div>
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<i class="fa fa-heart"></i>
<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;
}

Answer 1

You can center the vote class like this:
.vote {
position: relative;
top: 50%;
transform: translateY(-50%)
}
See http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ for how this works.
Scaling the font is trickier since you're using font-awesome. I don't think you can do so with CSS.
Here's a JavaScript solution, which sets the font-size as 30% of the height of each image:
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

Answer 2

Ok, #1 is easy: there are multiple possible solutions. Actually was a a really good extensive article about that on the internet some time ago: Vertical Centering With CSS
Or, you could use a modern solution like flexbox:
<div class="wrapper">
<div>
Centered vertically and horizontally
</div>
</div>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
Please remember to include prefixed versions for that if and where needed and check caniuse.com to see what browsers don't support this solution before deploying it.
As for #2: Took me quite some time to figure out that it's actually much easier than I thought:
.vote {
font-size: 30vw;
}
#media screen and (min-width: 600px) {
.vote {
font-size:15vw;
}
}
Adjust the value to your liking. Again: Viewport units are not totally supported by all browsers (cough IE cough), please check caniuse. I don't have a copy of IE handy just now, but I think vw should be supported, so I see no problems here. And keep in mind that Safari on iOS does some weird stuff, although to my knowledge that only affects vh and not vw.