Google MDL：抽屜圖標不居中

我正在嘗試Google MDL文檔中的fixed tab example。這裏是我的代碼：Google MDL：抽屜圖標不居中

CODE

<!-- Simple header with fixed tabs. --> 
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs"> 
     <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="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a> 
      <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a> 
      <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</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="fixed-tab-1"> 
      <div class="page-content"><!-- Your content goes here --></div> 
     </section> 
     <section class="mdl-layout__tab-panel" id="fixed-tab-2"> 
      <div class="page-content"><!-- Your content goes here --></div> 
     </section> 
     <section class="mdl-layout__tab-panel" id="fixed-tab-3"> 
      <div class="page-content"><!-- Your content goes here --></div> 
     </section> 
     </main> 
    </div>

輸出

問題是我的抽屜圖標位置是錯誤的！它與頂部而不是中心對齊。這裏有什麼問題？

來源

2016-03-08 bodruk

[Material Design Lite漢堡包菜單不在頭中居中]的可能重複（http://stackoverflow.com/questions/33793815/material-design-lite-hamburger-menu-not-centered-in-header） – bodruk

我發現這個answer它解決了問題！您需要將<!DOCTYPE html>添加到源中，並且所有內容都將正常工作。

來源

2016-03-08 22:39:28 bodruk

Google MDL：抽屜圖標不居中

回答

相關問題