1

如何在 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>
4

4 回答 4

0

你可以用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/

希望这可以帮助！

于 2013-11-27T04:25:43.093 回答
0

只需添加&nbsp;（链接前的空格）

  <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;
}
于 2012-08-25T13:39:42.087 回答
0

在这里，这应该可以工作：将其添加到包含应该居中的图像的 div 中。

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

无论 div 的尺寸或其包含的图像如何，这都应该使图像垂直居中。

于 2012-08-25T15:24:44.587 回答
-3

Css 有一个标签名称“vertical-align”可能你会得到你的解决方案

于 2012-08-25T14:40:47.850 回答