Question

I am looking for a simple way to middle-right align a img in a DIV, i.e., vertical-middle and horizontal-right align, like this:

I tried using vertical-align:middle and float:right in IMG styles, but seems not work together..

<div style='height: 300px; width: 300px'>
    <img src= 'http://www.w3schools.com/tags/smiley.gif' style='vertical-align: middle; float: right;'/>
</div>

Answer 1

<DIV style='height: 300px; width: 300px;border:1px solid #ff0000;display:table-cell;vertical-align: middle'>
<img src= 'http://www.w3schools.com/tags/smiley.gif' style='float:right;'/>
</DIV>

BTW, you are using “styles=” in your image tag. This is invalid.