JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<h3>flex box horizontal and vertical align</h3>
<div class="c">
    <img src="http://dummyimage.com/50"/>
</div>
<div class="c">
    <img src="http://dummyimage.com/25x50"/>
</div>
<div class="c">
    <img src="http://dummyimage.com/50x25"/>
</div>

CSS

.c {
    display:flex;
    align-items: center; /* align vertical */
    justify-content: center; /* align horizontal */
    margin: 5px;
    padding: 0;
    background: red;
    width: 52px;
    height: 52px;
}

.b {
    margin: 5px;
    padding: 0;
    background: red;
    width: 52px;
    height: 52px;
    
    line-height: 52px;
    text-align: center
}

.b img {
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.b.smallfont {
    font-size: 0;
}

.b.adjust {
    line-height: 48px;
}