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

我假设您希望垂直将内容放在您的铁页中。在您当前的解决方案中，铁页面没有填满可用空间。您可以通过添加fit布局类来实现此目的。然后，使用您提到的类应该可以工作。

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

<强>更新

要水平居中，请在班级中指定水平。

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

无法垂直居中铁页内的内容

1 个答案: