如何在内联圆上添加文本？

Question

我有5个圆圈像这样放置

​

​

我想在每个圆圈下面加一个小的“标题”，像这样

​

​

对于圆圈，我正在使用Vuetify中的v-avatar组件，但我不知道如何以类似于前面的图像的方式添加标题。这是我现在的代码：

​

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
    }
  },
})

.dark-grey-text {
    color: #707070 !important;
}

.pf-text{
    font-family: 'Alata', sans-serif;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
<v-app>
  <v-container>
    <h3 class="dark-grey-text pf-text text-center mt-2">INTENSITY</h3>
      <v-row class="mx-2 mt-2">
        <div class="mx-auto">
          <v-avatar color="#877787" size="25"></v-avatar>
          <v-avatar color="#B28C81" class="ml-4" size="25"></v-avatar>
          <v-avatar color="#E5DB9C" class="ml-4" size="25"></v-avatar>
          <v-avatar color="#CE7E7E" class="ml-4" size="25"></v-avatar>
          <v-avatar color="#707070" class="ml-4" size="25"></v-avatar>
        </div>
      </v-row>
  </v-container>
</v-app>
</div>

​

Answer 1

您可以将<v-avatar/>包装到具有flex列的div。然后将display: flex和flex-direction: row应用于包装它们的div。

<v-row ...>

  <div class="mx-auto d-flex flex-row">
    <div class="d-flex flex-column text-center">
      <v-avatar color="#877787" size="25"/>
      <span class="caption grey--text">P</span>
    </div>
    <div class="d-flex flex-column text-center ml-4">
      <v-avatar color="#B28C81" size="25"/>
      <span class="caption grey--text">edP</span>
    </div>
    <div class="d-flex flex-column text-center ml-4">
      <v-avatar color="#E5DB9C" size="25"/>
      <span class="caption grey--text">edT</span>
    </div>
    <div class="d-flex flex-column text-center ml-4">
      <v-avatar color="#CE7E7E" size="25"/>
      <span class="caption grey--text">edC</span>
    </div>
    <div class="d-flex flex-column text-center ml-4">
      <v-avatar color="#707070" size="25"/>
      <span class="caption grey--text">EdS</span>
    </div>
  </div>

</v-row>

​

​

这是一个代码演示。