快速拨号图标未居中

Question

我正在尝试为Web应用程序构建快速拨号，但是无论我如何尝试，快速拨号中的图标都偏离中心。

我遵循了https://vuetifyjs.com/en/components/floating-action-buttons上的教程，但是即使我从那里复制并粘贴代码，图标也不会居中

<v-speed-dial
        fab
        bottom
        right
        fixed
        v-model="fab"
        direction="top"
        transition="slide-y-reverse-transition"
      >
        <v-btn
          icon
          slot="activator"
          fab
          dark
          color="blue lighten-2"
          v-model="fab"
        >
          <v-icon>account_circle</v-icon>

          <v-icon>close</v-icon>
        </v-btn>

        <v-btn fab dark small color="green">
          <v-icon>edit</v-icon>
        </v-btn>

        <v-btn fab dark small color="indigo">
          <v-icon>add</v-icon>
        </v-btn>
      </v-speed-dial>

实际行为：

预期行为：

有人知道我在做什么错吗？

Answer 1

您可能想在控制台中检查v-icon对齐属性。该CSS似乎会影响内部图标的位置。

componentDidMount(){
  this.circularProgress.animate(100, 30000,Easing.linear);

  this.intervalId = setInterval(
    () => this.circularProgress.reAnimate(0,100, 30000,Easing.linear),
    30000
  );
}

componentWillUnmount() {
  clearInterval(this.intervalId);
}