[Vuejs]-How can i center the logo inside vuetify app bar?

by

1👍

✅

There are two ways to do this-

1. Try putting the v-spacer before and after the logo image-

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})
<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>

2. Use the grid system-

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})
<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>
👤Neha Soni

Leave a comment