英文:
How can i center the logo inside vuetify app bar?
问题
我需要内部的标志确切地显示在应用栏中间。如何在考虑应用栏内的其他元素的情况下实现这个效果？
我尝试在v-app-bar-icon之后使用v-spacer，但结果并不感觉居中。
我试图实现的一个示例是官方的 nuxt 站点应用栏（当显示在中等尺寸以下时）：https://nuxtjs.org/
<v-app-bar fixed app>
<v-app-bar-nav-icon
aria-label="显示或隐藏导航菜单"
@click.stop="drawer = !drawer"
></v-app-bar-nav-icon>
<nuxt-link aria-label="主页" to="/">
<v-img
v-show="searchClosed"
:src="require('~/assets/images/example_Logo.svg')"
max-height="55px"
max-width="110px"
class="mb-1"
contain
></v-img>
</nuxt-link>
<v-spacer v-show="searchClosed"></v-spacer>
<v-btn v-show="searchClosed" aria-label="显示用户菜单" icon>
<v-icon>mdi-account-circle</v-icon>
</v-btn>
<transition name="slide-fade">
<nav-search
v-show="!searchClosed"
@search-opened="searchClosed = false"
@search-closed="searchClosed = true"
></nav-search>
</transition>
<v-btn
v-show="searchClosed"
aria-label="显示或隐藏搜索输入"
icon
@click="searchClosed = false"
>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-app-bar>
英文:
I need the logo inside to be displayed exactly in the middle of the app bar. How can I achieve this result taking into consideration the other elements inside the app bar?
I tried using v-spacer after the v-app-bar-icon, but the result doesn't feel centered at all.
One example of what I am trying to achieve is the official nuxt site app bar (when the display is below md size): https://nuxtjs.org/
<v-app-bar fixed app>
<v-app-bar-nav-icon
aria-label="show-or-hide-navigation-menu"
@click.stop="drawer = !drawer"
/>
<nuxt-link aria-label="home-page" to="/">
<v-img
v-show="searchClosed"
:src="require('~/assets/images/example_Logo.svg')"
max-height="55px"
max-width="110px"
class="mb-1"
contain
></v-img>
</nuxt-link>
<v-spacer v-show="searchClosed"></v-spacer>
<v-btn v-show="searchClosed" aria-label="show-user-menu" icon>
<v-icon>mdi-account-circle</v-icon>
</v-btn>
<transition name="slide-fade">
<nav-search
v-show="!searchClosed"
@search-opened="searchClosed = false"
@search-closed="searchClosed = true"
></nav-search>
</transition>
<v-btn
v-show="searchClosed"
aria-label="show-or-hide-search-input"
icon
@click="searchClosed = false"
>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-app-bar>
答案1
得分: 1
- 尝试在标志图像前后放置
v-spacer-
<v-app-bar
color="deep-purple accent-4"
dense
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<v-img
src="https://picsum.photos/200/300"
max-height="55px"
max-width="110px"
class="mb-1"
contain
></v-img>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-app-bar>
- 使用网格系统 -
<v-app-bar
color="deep-purple accent-4"
dense
dark
>
<v-row>
<v-col align="start">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
</v-col>
<v-col align="center">
<v-img
src="https://picsum.photos/200/300"
max-height="55px"
max-width="110px"
class="mb-1"
contain
></v-img>
</v-col>
<v-col align="end">
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-col>
</v-row>
</v-app-bar>
（请注意，我已经将尖括号 < 和 > 替换为 < 和 >，以便在文本中正确显示 HTML 代码。）
英文:
There are two ways to do this-
1. Try putting the v-spacer before and after the logo image-
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<!-- language: lang-html -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<div>
<v-app-bar
color="deep-purple accent-4"
dense
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<v-img
src="https://picsum.photos/200/300"
max-height="55px"
max-width="110px"
class="mb-1"
contain
></v-img>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-app-bar>
</div>
</v-app>
</div>
<!-- end snippet -->
2. Use the grid system-
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<!-- language: lang-html -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<div>
<v-app-bar
color="deep-purple accent-4"
dense
dark
>
<v-row>
<v-col align="start">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
</v-col>
<v-col align="center">
<v-img
src="https://picsum.photos/200/300"
max-height="55px"
max-width="110px"
class="mb-1"
contain
></v-img>
</v-col>
<v-col align="end">
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-col>
</v-row>
</v-app-bar>
</div>
</v-app>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论