programing

Vuetify의 팹 버튼 아이콘이 수직으로 중앙에 위치하지 않음

prostudy 2022. 4. 29. 23:11
반응형

Vuetify의 팹 버튼 아이콘이 수직으로 중앙에 위치하지 않음

뷔에티비의 팹 버튼이 수직으로 중앙에 위치하도록 할 수 없다.

여기 나의 용법이 있는데, 평범하지 않은 특별한 점을 지적한다.

<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>

하지만 여전히 해결책은 아니야

나의 경우는 CSS 수입순서가 있기 때문이다.

FAB 아이콘이 수직으로 중앙에 배치되지 않음

Vuetify css 전에 Google 글꼴 로드 정보 추가

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

참조URL: https://stackoverflow.com/questions/51268313/vuetifys-fab-button-icon-is-not-centered-vertically

반응형