无法将聚合物元素垂直放置在全出血体内的居中位置

Question

I have a polymer element that I'm inserting into an html page where I'm using fullbleed in the body tag to leave no margins, and I want the element to fill the entire page. 我有一个Polymer元素，我要插入到html页面中，在body标签中使用fullble来保留空白，并且希望该元素填充整个页面。 I'm trying to center some text in this element vertically on the page, but the usual layout attributes I'm using don't seem to have any effect. 我试图在此元素上垂直在页面上居中放置一些文本，但是我使用的常规布局属性似乎没有任何作用。 See the attached example. 请参阅随附的示例。

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

Answer 1

i was able to get it to work in chrome 41 and firefox 36.0.4 by moving the vertical layout attribute to the #test div and using center-justified in place of center then putting self-center attribute on the inner div. 通过将垂直布局属性移至#test div并使用居中对齐代替center，然后将self-center属性放在内部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>

example here http://plnkr.co/edit/2fF4FeJn4LbdMm8dyhiD?p=preview 此处的示例http://plnkr.co/edit/2fF4FeJn4LbdMm8dyhiD?p=preview

无法将聚合物元素垂直放置在全出血体内的居中位置

问题描述

1 个解决方案

解决方案1
5 已采纳 2015-03-29 20:39:19

无法将聚合物元素垂直放置在全出血体内的居中位置

问题描述

1 个解决方案

解决方案1 5 已采纳 2015-03-29 20:39:19

解决方案1
5 已采纳 2015-03-29 20:39:19