css上面图标下边文字

在Web页面设计中，经常需要在图标上方描述相关信息。这种布局方式可以用CSS实现。下面我们就来看一下如何实现。

.icon {
  display: inline-block;
  vertical-align: middle;
  width: 48px;
  height: 48px;
  background: url("icon.png") no-repeat center;
}

.text {
  display: block;
  text-align: center;
} 

首先，我们需要定义一个图标的样式，使用background属性来设置图片。为了使图标和文本垂直对齐，需要使用vertical-align: middle。同时，为了让文本显示在图标下面，我们将文本用block元素包裹起来，使用text-align属性来居中对齐。

接下来，我们将图标和文本用两个相邻的元素包裹起来。最外层的元素定义了一个margin，用于调整图标和文本的间距。

<div class="container">
  <div class="icon"></div>
  <p class="text">相关信息</p>
</div> 

最后，我们将所有相关元素用一个容器包裹起来，方便调整整体布局。

通过这种方式，我们可以轻松地实现图标上方、文本下方的布局效果。这种布局方式非常适合需要突出相关信息的场景，比如产品展示、广告宣传等等。