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