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>

但它仍然不是一个解决方案.

Answer 1

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

FAB图标不垂直居中

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

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