javascript - 无法在 iron-pages 中垂直居中内容

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

谢谢!

Answer 1

我假设您希望垂直将您的 iron-pages 中的内容居中。在您当前的解决方案中，铁页不会填满可用空间。您可以通过添加 fit 布局类来实现。然后，使用您提到的类应该可行。

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

更新

要水平居中，在类中指定 horizo​​ntal。

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