无法在铁页内垂直居中放置内容

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">