css - 如何垂直对齐div中的图像？

Question

如何在div 容器中将图像显示为垂直对齐？

图像“setting.png”放在我附加的代码的最后一列中。请建议解决方案。

.table{
width: 100%;
margin: 20px 0px 20px 0px;
background-color: #EEEEEE;
}

.tableRow{
width: 100%;
clear: both;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #cccccc;
}

.tableCol{
float: left;
height: 40px;
line-height: 40px;
}

<div class="table">
    <div class="tableRow">
        <div class="tableCol" style="width:10%; text-align:center;">1</div>
        <div class="tableCol" style="width:40%">Michael</div>
        <div class="tableCol" style="width:40%">webexp@gmail.com</div>
        <div class="tableCol" style="width:10%;">
        <a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle"  /></a>
        </div>
    </div>  
</div>  

Answer 1

只需添加 (链接前的空格)

  <div class="table">
        <div class="tableRow">
            <div class="tableCol" style="width:10%; text-align:center;">1</div>
            <div class="tableCol" style="width:40%">Michael</div>
            <div class="tableCol" style="width:40%">webexp@gmail.com</div>
            <div class="tableCol" style="width:10%;">&nbsp;
            <a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle"  /></a>
            </div>
        </div>  
    </div> 

更好的解决方案:
将此添加到 css:

img {
margin-top:10px;
}