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

如果您知道settings.png图片的尺寸（本例中为20px x 20px），则可以使用 position：absolute; 执行此操作。

将类 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”可能会让你获得解决方案

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

4 个答案: