css上边图标下边文字

今天我们来介绍一种CSS技巧，即在上方显示图标，下方显示文字的布局。这种布局常用于网站的菜单栏、导航栏等位置。
首先，我们需要准备一个带有图标和文字的元素，例如：

<div class="icon-text">
  <i class="iconfont icon-home"></i>
  <p>首页</p>
</div> 

其中，我们使用了一个名为icon-text的类来包裹图标和文字。图标使用了字体图标，这里使用了icon-home这个图标，可以替换成其他图标。文字使用了p标签来包裹。
下面是对于CSS的解释：

.icon-text {
  display: inline-block;  //设置为内联块元素
  text-align: center;   //水平对齐方式为center
}
<br>
.icon-text i {
  display: block;
}
<br>
.icon-text p {
  margin-top: 10px;
} 

其中，我们将icon-text设置为inline-block，并且将文本内容居中对齐。为了让图标和文字垂直对齐，我们为icon-text i设置了display: block;。
最后，我们为.icon-text p设置了一个上边距，这个距离可以根据实际情况设置。
通过这种方法，我们就可以在页面上快速实现图标在上、文字在下的布局效果了。