JSFiddle - React, Tailwind, and code Playground

by rathoreahsan

HTML

<div class="container">
    <div id="TableCell">
        <img src="http://www.australian-nature-sounds.com/blog/files/20-australian-nature-sounds---journey-to-the-top-end_low_res.jpg" width="64" />
    </div>
    
    <br />
    <br />
    
    <div id="Block">
        <img src="http://www.australian-nature-sounds.com/blog/files/20-australian-nature-sounds---journey-to-the-top-end_low_res.jpg" width="64" />
    </div>
</div>

CSS

.container {
    width: 130px;
}

#TableCell{
    display: table-cell; /*This will not work on less then IE8*/
    vertical-align: middle;
    border: 1px solid #000;
    text-align:center;
    padding: 20px;
}

#Block{
    display: block; /*This will work on all Browsers*/
    padding: 20px;
    border: 1px solid #000;
    text-align:center;
    position: relative;
}

#Block img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}