Проблема вертикального центрирования полимерного элемента внутри тела с полной ячейкой

У меня есть полимерный элемент, который я вставляю в html-страницу, где я использую 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>

источник

2015-03-29 cayblood

я был в состоянии заставить его работать в хроме 41 и светлячке 36.0.4 путем перемещения по вертикали атрибута макета к #test DIV и с помощью центра оправданного вместо центра, то поместив атрибут самоцентра на внутренний div.

<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

источник

2015-03-29 20:39:19

Проблема вертикального центрирования полимерного элемента внутри тела с полной ячейкой

ответ

Смежные вопросы