html - 垂直对齐 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

使用- 我通过 Chrome 中的 F12 开发工具进行了尝试，并且成功了vertical-align: middle;。img

#contentright img {
    vertical-align: middle;
}

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

jsFiddle在这里