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

【问题标题】：How to do center layout like this in Vuetify or Material Design?如何在 Vuetify 或 Material Design 中进行这样的中心布局？
【发布时间】：2017-12-24 00:26:21
【问题描述】：

我现在有这个布局：

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

这是我在 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>

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

-阿迪

【问题讨论】：

你会想要打破这个。你和你的目标布局之间有很多编程。您没有在此处包含任何 CSS，这几乎就是您的问题要解决的地方。

标签： css layout vue.js vuejs2 vuetify.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

尝试添加<v-container class="py-0"></v-container>。它将设置最大 900px 宽度，“py-0”将删除自定义填充顶部和底部。

【讨论】：

【解决方案3】：

这不是一个很好的答案，因为我不熟悉 Vuetify。不过，我可以告诉你如何做你想做的居中。

flexbox 是一种非常有用的 CSS 显示类型。我注意到 Vuetify 在他们的很多布局中都使用了它。

你想要的是一个居中的块，它的内容是左对齐的。您可以通过使用具有以下 CSS 设置的全宽容器来实现这一点：

{
  display: flex;
  justify-content: center;
}

在其中，另一个具有这些设置的容器：

{
  justify-content: flex-start;
  max-width: 600px; // or however wide you want your content block to be
  width: 100%;
}

（使这个容器居中的一种 pre-flexbox 方法是将左右边距设置为auto）

在下面的 sn-p 中，我为居中块的背景着色，以便您可以看到它们的位置。背景没有对齐，因为 Vuetify 为 toolbar__title 类提供了 margin-left，但文本对齐得相当好。

您需要单击“整页”链接，然后调整窗口大小以查看实际布局。

new Vue({
  el: '#app',
  data: {
    tabArray: ['Home', 'Feed']
  }
})

.toolbar__extension,
.tabs__wrapper {
  display: flex;
  justify-content: center;
}

.toolbar__title,
.tabs__container {
  background-color: rgba(255, 255, 255, 0.2);
  justify-content: flex-start !important;
  max-width: 600px;
  width: 100%;
}

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <main>
      <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-2 centered">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>
    </main>
  </v-app>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>

【讨论】：