Vuetify 的 fab 按钮图标未垂直居中答案

【问题标题】：Vuetify's fab button icon is not centered verticallyVuetify 的 fab 按钮图标未垂直居中
【发布时间】：2018-12-18 11:33:24
【问题描述】：

我无法让 vuetify 的 fab 按钮垂直居中。

这是我的用法，特别是与众不同。

<v-btn 
    color="primary" 
    fab 
    small >
    <v-icon>print</v-icon>                  
</v-btn>

这是我的 main.js 文件

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
import "material-design-icons/iconfont/material-icons.css";
import "typeface-roboto/index.css";
Vue.use(Vuetify);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

这是输出

我使用的是 Vue 2.5.16 和 Vuetify 1.1.3 版本

即我没有添加样式或任何外部其他 css

更新：我通过在v-icon 上添加height:auto 找到了解决方法

<v-icon style="height:auto;">print</v-icon>

但这仍然不是解决方案。

【问题讨论】：

你用的是什么版本？我用你的 btn 准备了 codepen，但它工作正常 codepen.io/anon/pen/XBWEpV?editors=1010
Vuetify 版本是 1.1.3
你得到解决方案了吗？
@AnkitKumarOjha 不
你在使用任何类型的 flex'

标签： vue.js vuejs2 material-design vuetify.js

【解决方案1】：

在我的情况下，这是因为 CSS 导入的顺序

FAB icon not centered vertically

Add information about load Google font before Vuetify css

import "material-design-icons-iconfont/dist/material-design-icons.css";
import "vuetify/dist/vuetify.min.css";

【讨论】：