页面中的铁柔性布局中心

时间:2016-05-11 11:56:46

标签: polymer flexbox

我试图纵向和横向居中一张纸卡,无法弄清楚我哪里出错:

<body unresolved>
    <div class="flex-vertical">
        <div class="flex-horizontal">
            <paper-card heading="Login" image="http://placehold.it/400x175/FFC107/000000">
                <div class="card-content">
                    <paper-input label="Windows username" always-float-label></paper-input>
                    <paper-input label="Password" type="password" always-float-label></paper-input>
                </div>
                <div class="card-actions">
                    <paper-button>Login</paper-button>
                </div>
            </paper-card>
        </div>
    </div>
</body>

<style is="custom-style">
    body {
        @apply(--layout-fullbleed);
        @apply(--layout-vertical);
    }

    .flex-horizontal {
        @apply(--layout-horizontal);
        @apply(--layout-center-justified);
    }

    .flex-vertical {
        @apply(--layout-vertical);
        @apply(--layout-center);
    }
</style>

1 个答案:

答案 0 :(得分:2)

首先我们需要导入iron-flex-layout-classes元素。然后我们定义了我们需要的类,并包含iron-flex-layout-classes元素所需的模块。

<style is="custom-style" include="iron-flex iron-positioning iron-flex-alignment">
  .card-container {
    height: 100%;
  }
</style>

为了实现居中,我们使用了两个div:

<div class="horizontal layout center-justified card-container">
<div class="vertical layout center-justified">

仅需要card-container类将div的高度设置为100%。我们需要div具有100%的高度才能将它们设置在页面的中心。

下面的工作演示。

<!doctype html>

<head>
  <meta charset="utf-8">
  <!---- >
  <base href="https://polygit.org/components/">
  Toggle below/above as backup when server is down
  <!---->
  <base href="https://polygit2.appspot.com/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-input/paper-input.html">
  <link rel="import" href="paper-card/paper-card.html">

  <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">

  <style is="custom-style" include="iron-flex iron-positioning iron-flex-alignment">
    .card-container {
      height: 100%;
    }
  </style>
</head>

<body unresolved class="fullbleed">
  <div class="horizontal layout center-justified card-container">
    <div class="vertical layout center-justified">
      <paper-card heading="Login" image="http://placehold.it/400x175/FFC107/000000">
        <div class="card-content">
          <paper-input label="Windows username" always-float-label></paper-input>
          <paper-input label="Password" type="password" always-float-label></paper-input>
        </div>
        <div class="card-actions">
          <paper-button>Login</paper-button>
        </div>
      </paper-card>
    </div>
  </div>
</body>