div中的垂直对齐图像

Question

我知道这已被多次询问，但我找不到适合我的答案。这适用于多个网页，因此图像的大小不同。我尝试过vertical-align，table-cell，line-height以及其他所有提到的内容。

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

在vertical-align: middle;上使用img - 我是通过Chrome中的F12开发工具尝试过的，它运行良好。

#contentright img {
    vertical-align: middle;
}

这是有效的，因为父级设置为display:table-cell，并且vertical-align: middle

jsFiddle here