如何在 Vuetify 或 Material Design 中进行这样的中心布局？

Question

我现在有这个布局：

但我的最终目标是这样，主要内容是居中的。工具栏和页面标题居中，但偏左一点：

这是我在 Vuetify/Vue 中的模板布局

<v-tabs dark fixed centered>
   <v-toolbar extended class="cyan" dark>
     <v-toolbar-side-icon></v-toolbar-side-icon>
     <v-spacer></v-spacer>

     <v-btn icon>
       <v-icon>search</v-icon>
     </v-btn>
     <v-btn icon>
       <v-icon>more_vert</v-icon>
     </v-btn>

       <v-toolbar-title slot="extension" class="display-3">Share My Pic</v-toolbar-title>

   </v-toolbar>
   <v-tabs-bar slot="activators" class="cyan ">
     <v-tabs-slider class="yellow" >Slider</v-tabs-slider>
     <v-tabs-item
       v-for="i in tabArray"
        :key="i"
        :href="'#tab-' + i">
       {{i}}
     </v-tabs-item>
   </v-tabs-bar>
   <v-tabs-content
     v-for="i in 3"
     :key="i"
     :id="'tab-' + i"
   >
     <v-card flat>
       <v-card-text>{{ text }}</v-card-text>
     </v-card>
   </v-tabs-content>
 </v-tabs>

请帮助。任何让我朝着正确方向前进的好建议都值得赞赏。

-阿迪

原文由 Adi Mabfalin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我遇到了同样的问题，上面使用 flex 的解决方案并没有为我解决。起作用的只是在 — 中添加 class="mx-auto" <v-img> （例如 <v-img :src="image" class="mx-auto" width="72"></v-img> 。这相当于 CSS“margin-left:auto; margin-right:auto;”。

原文由 Erez 发布，翻译遵循 CC BY-SA 4.0 许可协议