偷师某宝
<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
时间: 2024-10-03 00:05:49