css：图文效果（上面图片下面文字）

效果

代码

<div class="content-account">
  <div>
    <i></i>
    <p>学习计划</p>
  </div>
  <div>
    <i></i>
    <p>我的练习</p>
  </div>
</div>

.content-account {
  display: flex;
  & > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1.2rem;
    height: 0.95rem;
    margin-right: 0.8rem;
    position: relative;
    p {
      font-size: 0.3rem;
      color: #666666;
      position: absolute;
      bottom: 0;
    }
  }
  // 学习计划
  & > div:nth-of-type(1) {
    i {
      width: 0.48rem;
      height: 0.48rem;
      background: url("../assets/logo-plan.png") no-repeat;
      background-size: 100% auto;
    }
  }
  // 我的练习
  & > div:nth-of-type(2) {
    i {
      width: 0.38rem;
      height: 0.38rem;
      background: url("../assets/logo-practice.png") no-repeat;
      background-size: 100% auto;
    }
  }
}