VuetifyやMaterial Designでこのようにセンターレイアウトを行うには？

Question

私は今のように、このレイアウトを持っている：

しかし、私の最終目標は、これです、メインコンテンツが中央に配置されます。ツールバーとページタイトルが中央に配置されますが、左の少し：

ここに私のテンプレートのレイアウトは、親切にplsは助け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

Answer 1

私は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%; 
} 

（このコンテナを中央に事前フレキシボックスの方法左と右の余白をautoに設定することです）

以下のスニペットでは、中心のブロックの背景を色付けして、それらの位置を確認できます。 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>

Answer 2

<v-container class="py-0"></v-container>を追加してください。最大900pxの幅を設定し、 "py-0"はカスタムパディングの上端と下端を削除します。