JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<div id="div1">
  <img src="http://dummyimage.com/100x50/fc0/000000.png">&#8203;
</div>
<br>
<div id="div2">
  <img src="http://dummyimage.com/100x50/fc0/000000.png">
</div>
<br>
<div id="div3">
  <img src="http://dummyimage.com/100x50/fc0/000000.png">
</div>

CSS

#div1
{
    width: 300px;
    height: 300px;
    background-color: blue;
    line-height: 300px;
    text-align: right;
}
#div1 img
{
    vertical-align: middle;
}
#div2
{
    width: 300px;
    height: 300px;
    background-color: blue;
    position: relative;
}
#div2 img
{
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -25px; /* -(image_height/2) */
}
#div3
{
    width: 300px;
    height: 300px;
    background-color: blue;
}
#div3 img
{
    float: right;
    position: relative;
    top: 125px; /* (div_height-image_height)/2 */
}