小图块的图标和文字居中

Posted 2020-08-14

偷师某宝

<ul class="piclist">
    <li class="listiem">
        <a href="#">
            <span></span>
            <p>说明1</p>
        </a>
    </li>
    <li class="listiem">
        <a href="#">
            <span></span>
            <p>说明2</p>
        </a>
    </li>
    <li class="listiem">
        <a href="#">
            <span></span>
            <p>说明3</p>
        </a>
    </li>
</ul>

.piclist {
    margin: 20px 0 0 20px;
}
.listiem {
    float: left;
    margin-right: 10px;
    width: 60px;
    height: 60px;
    background-color: pink;
}
.listiem > a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}
.listiem > a > span {
    display: inline-block;
    margin-top: 10px;
    width: 40px;
    height: 26px;
    background: url("../images/image.png") center top no-repeat;
}

把图和文字都当成内容居中，其中图的span的display属性值要为inline-block