無法在鐵頁內垂直居中放置內容

Question

我似乎無法垂直放置位於iron-pages （反過來位於paper-drawer-panel ）中的內容。 請參見下面的示例代碼：

<paper-drawer-panel id="drawerPanel" responsive-width="1280px">

  <div class="nav" drawer>
    <!-- Nav Content -->
    <paper-menu attr-for-selected="data-route" selected="{{route}}">
        <paper-item data-route="findParties">
          <iron-icon icon="home"></iron-icon>
          <span>Find Parties</span>
        </paper-item>
        <paper-item data-route="myParties">
          <iron-icon icon="icons:alarm-add"></iron-icon>
          <span>My Parties</span>
        </paper-item>
        <paper-item data-route="friends">
          <iron-icon icon="home"></iron-icon>
          <span>Friends</span>
        </paper-item>
    </paper-menu>
  </div>

  <paper-header-panel class="main" main mode="waterfall">

    <!-- Main Toolbar -->
    <paper-toolbar>
      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
    </paper-toolbar>

    <!-- Main Content -->
    <div>
      <iron-pages attr-for-selected="data-route" selected="{{route}}">
        <div id="tempId" data-route="findParties">
           <party-list-item></party-list-item>
           <party-list-item></party-list-item>
        </div>

        <section data-route="myParties">
          My Parties
        </section>

        <section data-route="friends">
          My Friends
        </section>
      </iron-pages>
    </div>

  </paper-header-panel>

</paper-drawer-panel>

我嘗試添加class="layout vertical center-justified"但無法正常工作。 我還在其他地方嘗試過，創建新的div並添加布局類，但是它也不起作用。 不知道我在做什么錯。 除了paper-elements.生成的CSS之外，沒有其他CSS被使用paper-elements.

謝謝！

Answer 1

我假設您要在鐵頁中垂直放置內容。 在您當前的解決方案中，鐵頁面不會填滿可用空間。 您可以通過添加fit布局類來實現。 然后，使用您提到的類即可。

<iron-pages class="layout vertical center-justified fit">

更新

要水平居中，請在課程中指定水平。

<iron-pages class="layout horizontal center-justified">