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;
            }
        }
    }
    
}