如何在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;
}

Answer 2

在這里，這應該起作用：將其添加到div中，其中包含應居中的圖像。

display:table-cell;
vertical-align:middle;

無論您的div尺寸或包含的圖像尺寸如何，這都應使圖像垂直居中。

Answer 3

您可以使用position：absolute; 如果您知道settings.png圖片的尺寸（此示例為20px x 20px）。

將類tableColSettings添加到設置圖像周圍的<a> 。 然后添加CSS；

.tableColSettings{
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px; /* Half image dimensions */
    width: 20px;
    height: 20px;
    line-height: 0;
}
.tableColSettings img{
    width: 100%;
}

無論高度如何，設置圖像都將始終位於元素的中心。 這是一個有效的小提琴： http : //jsfiddle.net/384pa/

希望這可以幫助！

Answer 4

CSS具有標簽名稱“ vertical-align”，也許您會得到解決方案