快速拨号图标未居中答案

【问题标题】：Speed-Dial Icons not centered快速拨号图标未居中
【发布时间】：2019-07-11 05:53:51
【问题描述】：

我正在尝试为 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>

实际行为：

预期行为：

有人知道我在那里做错了吗？

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

您可能需要在控制台中检查您的 v-icon align 属性。这个 css 似乎会影响内部图标的位置。

.v-icon {
    align-items: center;
    display: inline-flex;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    font-size: 24px;
    justify-content: center;
    line-height: 1;
    transition: .3s cubic-bezier(.25,.8,.5,1);
    vertical-align: text-bottom;
    box-shadow: 0 0 black;
}

【讨论】：