在div中垂直对齐图像

Question

我知道这个问题已经被问过很多次了，但是我找不到适合我的答案。 这是针对多个网页的，因此图像的大小并不相同。 我尝试了垂直对齐，表格单元格，行高以及其他所有提到的内容。

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在这里