반응형
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 수입순서가 있기 때문이다.
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
반응형
'programing' 카테고리의 다른 글
필터링/검색 문제 후 입력 변경 - VueJs (0) | 2022.04.29 |
---|---|
서명되지 않은 문자란? (0) | 2022.04.29 |
데이터 테이블(v-data-table) Vuetify Data Table - 특정 열의 값을 조건부로 스타일 지정하는 방법 (0) | 2022.04.28 |
Vuex 저장소의 페이지 지정 (0) | 2022.04.28 |
불변의 의미는 무엇인가? (0) | 2022.04.28 |