图片与文字垂直居中对齐一行四个

周亚鑫

已于 2023-03-26 10:31:36 修改

阅读量541

点赞数 2

分类专栏： vue html css 文章标签： css css3 html

于 2022-06-06 17:11:36 首次发布

本文链接：https://blog.csdn.net/q4717529/article/details/125150508

版权

vue 同时被 3 个专栏收录

121 篇文章 16 订阅

订阅专栏

css

18 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

html

    <div class="info-content">
      <div class="info-content-bottom">
        <div
          class="info-content-item"
          v-for="(item1, index1) of 7"
          :key="index1"
        >
          <!-- <img :src="item1.img_url" alt />
        <span>{{ item1.menu_name }}</span> -->
          <img src="../../../assets/img/dw@2x.png" alt />
          <span>强强强</span>
        </div>
      </div>
    </div>

css

  .info-content {
    width: 100%;
    padding: 0 0.28rem;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 0.2rem;
    border-radius: 0.08rem;
    .info-content-bottom {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding-bottom: 0.3rem;
    }

    .info-content-bottom::after {
      content: "";
      flex: auto;
    }

    .info-content-item {
      width: 21%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 4%;
      margin-top: 0.5rem;
    }

    .info-content-item.active {
      display: none !important;
    }

    .wrap-info
      .info-content
      .info-content-bottom
      .info-content-item:nth-child(4n) {
      margin-right: 0;
    }

    .info-content-item img {
      width: 0.64rem;
      height: 0.64rem;
      margin-bottom: 0.2rem;
    }

    .info-content-item span {
      font-size: 0.24rem;
      line-height: 0.34rem;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
      overflow: hidden;
    }
  }