vue.js - Vuetify 的 fab 按钮图标未垂直居中

Question

我无法让 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

---

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

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

但这仍然不是解决方案。

标签： vue.jsvuejs2material-designvuetify.js

Answer 1

就我而言，这是因为 CSS 导入的顺序

FAB 图标未垂直居中

在 Vuetify css 之前添加有关加载 Google 字体的信息

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