JSFiddle - React, Tailwind, and code Playground

by Tyler N.

HTML

<div class="glyph">
    <div class="img"></div>
</div>
<div class="glyph">
    <div class="img img2"></div>
</div>
<div class="glyph">
    <div class="img img3"></div>
</div>

CSS

.glyph {
    height: 50px;
    width: 50px;
    background: #000;
    border: 2px solid red;
    margin-bottom: 10px;
}
.img {
    background: #fff;
    height: 20px;
}
.img2 {
    height: 31px;
}
.img3 {
    height: 43px;
}

JavaScript

$('.glyph > .img').each(function() {
        
    var glyphH = $('.glyph').height();
    var imgH = $(this).height();
       
    $(this).css('margin-top', Math.floor((glyphH - imgH)/ 2) + 'px');
        
});