vue.js - 中心饼图

Question

我正在使用 Apex 的饼图来可视化数据。现在我想把这个饼图放在 vuetify card 元素的中心，但不幸的是我不能让它工作。目前，它看起来像这样：

<v-card elevation="2" class="ma-3 mx-auto">
    <v-card-title>
        Odds
    </v-card-title>
    <v-divider></v-divider>
    <v-card-text>
        <div id="chart3">
          <apexchart type="pie" width="550" :options="chartOptions3" :series="series3"></apexchart>
        </div>
    </v-card-text>
</v-card>

在视觉上，它看起来像这样：

如何使饼图居中？

标签： vue.jsvuetify.jsapexcharts

Answer 1

应用分别设置和的d-flex和justify-center实用程序 CSS 类：display:flexjustify-contents:center<v-card-text>

<v-card-text class="d-flex justify-center">

演示