ul>li>a>img图片居中

<div class="product-box">
    <ul>
        <li><a href=""><img src="img/xianhua_icon.png" alt=""></a></li>
        <li><a href=""><img src="img/yongshenghua_icon.png" alt=""></a></li>
        <li><a href=""><img src="img/cake_icon.png" alt=""></a></li>
        <li><a href=""><img src="img/gift_icon.png" alt=""></a></li>
        <li><a href=""><img src="img/choclate_icon.png" alt=""></a></li><!-- 
        <div style="clear: both;"></div> -->
    </ul>
</div>

.product-box{
    
    ul{
        li{
            float: left;
        }
        a{
            img{
            }
        }
    }
    
}

仅仅对li设置浮动时效果如下，没有居中且li（a标签）高度辣么~高

对ul设置居中并将其显示方式设置为table，即

.product-box{
    ul{
        margin: 0 auto;
        display: table;
        li{
            float: left;
        }
        a{
            background-color: #ccc;
            img{

            }
        }
    }
    
}

就变成了这个样子：

对里设置宽度可以清楚的看到a标签均排列在对应li的左侧

对img设置居中并设置display:block就是最终效果啦！

 

最终代码：

.product-box{
    ul{
        margin: 0 auto;
        display: table;
        li{
            width: 0.7rem;
            float: left;
            background-color: pink;
        }
        a{
            background-color: #ccc;
            img{
                margin: 0 auto;
                display: block;
            }
        }
    }
    
}

 

来源：https://www.cnblogs.com/ma-chao/p/7498728.html