Question

我有一个聚合物元素，我插入到html页面，我在body标签中使用fullbleed没有留下边距，我希望元素填满整个页面。我试图将这个元素中的一些文本垂直居中在页面上，但是我使用的常用布局属性似乎没有任何效果。参见附带的例子。

＆＃13;

<script src="http://www.polymer-project.org/0.5/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">

<polymer-element name="polymer-css-test">
  <template>
    <style>
      #test {
        background-color: green;
      }
    </style>
    <div id="test" fit>
      <div vertical layout center>
        I want this text to be vertically and horizontally centered.
      </div>
    </div>
  </template>
  <script>
    Polymer('polymer-css-test', {
      ready: function () {
      }
    });
  </script>
</polymer-element>
<body unresolved fullbleed layout vertical>
  <polymer-css-test></polymer-css-test>
</body>

＆＃13;

Answer 1

我能够通过将垂直布局属性移动到#test div并使用居中对齐代替中心然后将自我中心属性放在内部div上来使其在chrome 41和firefox 36.0.4中工作。

    <script src="http://www.polymer-project.org/0.5/webcomponents.js"></script>
    <link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">

    <polymer-element name="polymer-css-test">
      <template>
        <style>
          #test {
            background-color: green;
          }
        </style>
        <div id="test" fit layout vertical center-justified>
          <div self-center>
            I want this text to be vertically and horizontally centered.
          </div>
        </div>
      </template>
      <script>
        Polymer('polymer-css-test', {
          ready: function () {
          }
        });
      </script>
    </polymer-element>
    <body unresolved fullbleed layout vertical>
      <polymer-css-test></polymer-css-test>
    </body>

示例http://plnkr.co/edit/2fF4FeJn4LbdMm8dyhiD?p=preview

难以将聚合物元件垂直对中在全速体内

1 个答案: