30-图片和文字上下垂直居中对齐

一、如何实现下列效果：文字图片垂直居中对齐。

HTML结构如下：

                <li>
                    <a href="#">
                        <img src="images/nav1.png" alt="">
                        小米秒杀
                    </a>
                </li>

　css代码：

.home-hero-sub .daily-service li {
    float: left;
    width: 76px;
    height: 82px;
    padding-top: 20px;
    line-height: 30px;   // 行高代码可以控制图片和文字距离，不要等于行高，不然图片和文字距离会很大
}

.home-hero-sub .daily-service img {
    display: block;  // 将图片转换为块级元素，不然图片和文字会水平对齐
    margin: 0 auto;　// 让图片在li里面水平居中对齐
    width: 24px;
    height: 24px;
}

　最终效果