image - 在 float div 中对齐图像中心

Question

我有一个循环来在 float div block 中加载 Logo 图像，我尝试了一些来自stackoverflow的提示，但没有运气使 Logo 在div内居中和中间对齐，所有 Logo 高度都不是固定的，并且可能具有不同的高度对于每个:

<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
    <img width="78px" align="left" src="images/logo/logo1.jpg">     
</div>

请帮忙，谢谢。

Answer 1

使用定位。以下内容对我有用......

缩放到图像中心(图像填充 div):

    div{
        float:left;
        display:block;
        overflow:hidden;
        width: 70px; 
        height: 70px;  
        position: relative;
    }
    div img{
        min-width: 70px; 
        min-height: 70px;
        max-width: 250%; 
        max-height: 250%;    
        top: -50%;
        left: -50%;
        bottom: -50%;
        right: -50%;
        position: absolute;
    }

没有缩放到图像中心(图像没有填充div):

   div{
        float:left;
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }