Vertical align image within a div

Question

I know this has been asked many times but I can't find an answer that works for me. This is for several webpages so the images are not all the same size. I have tried vertical-align, table-cell, line-height and everything else that's been mentioned.

html: http://www.joekellywebdesign.com/UpdatedSite/services.html

    <div id="contentright">
            <img src="images/internet.jpg">
    </div> <!-- end of contentright div --> 

CSS: http://www.joekellywebdesign.com/UpdatedSite/css/styles.css

#contentright {
float: right;
background-color:#FFF;
width: 450px;
height: 350px;
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 350px;}

Answer 1

Use vertical-align: middle; on the img - I tried it via the F12 dev tool in Chrome, and it worked.

#contentright img {
    vertical-align: middle;
}

This works because the parent is set to display:table-cell , and has vertical-align: middle

jsFiddle here