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

Question

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

我有一个聚合物元素,我正在插入一个html页面,我在body标签中使用fullbleed没有留下边距,我希望元素填充整个页面.我试图在页面上垂直居中这个元素中的一些文本,但我正在使用的常用布局属性似乎没有任何影响.请参阅附带的示例.

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

jim*_*h10 5

我可以通过将垂直布局属性移动到#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>

Run Code Online (Sandbox Code Playgroud)

这里的例子http://plnkr.co/edit/2fF4FeJn4LbdMm8dyhiD?p=preview

归档时间：	10 年，7 月前
查看次数：	2779 次
最近记录：	10 年，7 月前