Css 将文本置于图标图像下方的最佳方式

我正在尝试使用材料设计Lite库

在其中一个选项卡中放置图标并在其下方显示选项卡文本的最佳方式是什么（记住最佳实践和可伸缩性）

标题
标题

我可以这样构造一个div：

<a href="#scroll-tab-1" class="mdl-layout__tab is-active MY-CLASS-1"><i class="material-icons">person</i><span class="MY-CLASS-2">Profile</span> </a>

如何使此代码总体上更好？

html

<div class="item">
    <img src=""/>
    <span class="caption">Tab</span>
</div>

ul，
ulli{
保证金：0；
填充：0；
列表样式类型：无；
}
ulli{
显示：内联块；
}
ullia{
背景：#efef；
填充：0 15px；
文字装饰：无；
线高：40px；
显示：内联块；
}
ulli是一个跨度{
背景：url（'http://findicons.com/files/icons/2255/cologne/32/user.png“）禁止重复#ccc；
宽度：30px；
高度：30px；
边际：0 15px 0 0；
显示：内联块；
垂直对齐：中间对齐；
}

.MY-CLASS-1 {
    position: relative;
    width: 60px;
}

.MY-CLASS-2 {
    display: block;
    position: absolute;
    bottom: -12px;
    font-size: smaller;
    left: 198px;
}

<div class="item">
    <img src=""/>
    <span class="caption">Tab</span>
</div>

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 50px;
}
img {
    width: 30px;
    height: 30px;
    background-color: blue;
}
.caption {
    display: block;
}