Material Design Liteでタブバーを中央に配置する方法

Question

Material Design Guidelinesは、中央のタブバー（https://material.io/guidelines/components/tabs.html）を指定します。 MDLのクラスがありますか？もしそうでなければ、私はCSSでこれをどのように達成できますか？デフォルトでは

Answer 1

MDL Tab Bar (v.1.3.0)はこのように、中央に配置されます。

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" /> 
 
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"> 
 
    <div class="mdl-tabs__tab-bar"> 
 
    <a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a> 
 
    <a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a> 
 
    <a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a> 
 
    </div> 
 

 
    <div class="mdl-tabs__panel is-active" id="starks-panel"> 
 
    <ul> 
 
     <li>Eddard</li> 
 
     <li>Catelyn</li> 
 
     <li>Robb</li> 
 
     <li>Sansa</li> 
 
     <li>Brandon</li> 
 
     <li>Arya</li> 
 
     <li>Rickon</li> 
 
    </ul> 
 
    </div> 
 
    <div class="mdl-tabs__panel" id="lannisters-panel"> 
 
    <ul> 
 
     <li>Tywin</li> 
 
     <li>Cersei</li> 
 
     <li>Jamie</li> 
 
     <li>Tyrion</li> 
 
    </ul> 
 
    </div> 
 
    <div class="mdl-tabs__panel" id="targaryens-panel"> 
 
    <ul> 
 
     <li>Viserys</li> 
 
     <li>Daenerys</li> 
 
    </ul> 
 
    </div> 
 
</div>

あなたは左（または右）したい場合はこれが.mdl-tabs__tab-bar {justify-content: center;}

のデフォルトのスタイルによって達成されます.mdl-tabs__tab-barセレクタにjustify-content: flex-startまたはjustify-content: flex-endを追加できるタブバーを揃えます。

.mdl-tabs__tab-bar { 
    justify-content: flex-start; 
} 

.mdl-tabs__tab-bar { 
 
    justify-content: flex-start !important; 
 
}

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/> 
 

 
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"> 
 
    <div class="mdl-tabs__tab-bar"> 
 
     <a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a> 
 
     <a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a> 
 
     <a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a> 
 
    </div> 
 

 
    <div class="mdl-tabs__panel is-active" id="starks-panel"> 
 
    <ul> 
 
     <li>Eddard</li> 
 
     <li>Catelyn</li> 
 
     <li>Robb</li> 
 
     <li>Sansa</li> 
 
     <li>Brandon</li> 
 
     <li>Arya</li> 
 
     <li>Rickon</li> 
 
    </ul> 
 
    </div> 
 
    <div class="mdl-tabs__panel" id="lannisters-panel"> 
 
    <ul> 
 
     <li>Tywin</li> 
 
     <li>Cersei</li> 
 
     <li>Jamie</li> 
 
     <li>Tyrion</li> 
 
    </ul> 
 
    </div> 
 
    <div class="mdl-tabs__panel" id="targaryens-panel"> 
 
    <ul> 
 
     <li>Viserys</li> 
 
     <li>Daenerys</li> 
 
    </ul> 
 
    </div> 
 
</div>

タブバーのためのもう一つの場所は、ナビゲーションです。この場合、センタリングの例があります。解決方法は他の場合と同じです。.mdl-layout__tab-barセレクタにjustify-content: centerを適用してください。

.mdl-layout__tab-bar { 
 
    justify-content: center; 
 
}

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/> 
 

 
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 
 
    <header class="mdl-layout__header"> 
 
    <div class="mdl-layout__header-row"> 
 
     <!-- Title --> 
 
     <span class="mdl-layout-title">Title</span> 
 
    </div> 
 
    <!-- Tabs --> 
 
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> 
 
     <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a> 
 
     <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a> 
 
     <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a> 
 
     <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a> 
 
     <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a> 
 
     <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a> 
 
    </div> 
 
    </header> 
 
    <div class="mdl-layout__drawer"> 
 
    <span class="mdl-layout-title">Title</span> 
 
    </div> 
 
    <main class="mdl-layout__content"> 
 
    <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1"> 
 
     <div class="page-content"><!-- Your content goes here --></div> 
 
    </section> 
 
    <section class="mdl-layout__tab-panel" id="scroll-tab-2"> 
 
     <div class="page-content"><!-- Your content goes here --></div> 
 
    </section> 
 
    <section class="mdl-layout__tab-panel" id="scroll-tab-3"> 
 
     <div class="page-content"><!-- Your content goes here --></div> 
 
    </section> 
 
    <section class="mdl-layout__tab-panel" id="scroll-tab-4"> 
 
     <div class="page-content"><!-- Your content goes here --></div> 
 
    </section> 
 
    <section class="mdl-layout__tab-panel" id="scroll-tab-5"> 
 
     <div class="page-content"><!-- Your content goes here --></div> 
 
    </section> 
 
    <section class="mdl-layout__tab-panel" id="scroll-tab-6"> 
 
     <div class="page-content"><!-- Your content goes here --></div> 
 
    </section> 
 
    </main> 
 
</div>