Question

我有一个单页应用程序，我尝试了一下布局。虽然我试图理解它，但我试图将元素放在元素内容区域的中心。我正在使用所有这些的标题。

以下是index.html

的正文区域的整体形式

<body unresolved class="fullbleed layout vertical">
 <template id="app" is="dom-bind">
  <paper-header-panel class="flex" mode="standard">
  <paper-toolbar> ... </paper-toolbar>
  <neon-animated-pages
    class="flex"
    selected="[[route]]"
    attr-for-selected="selector"
    entry-animation="scale-up-animation"
    exit-animation="fade-out-animation">
    <pas-menu path="/" selector="home" route="{{route}}" access=[[user.keys]]></pas-menu>
  .............. More elements
  </neon-animated-pages>
</paper-header-panel>

看着我的元素

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../pas-route-behaviour/pas-route-behaviour.html">
 <template>
<style>
  paper-card: {
    width:400px;
    height:200px;
  }
</style>
<div class="vertical layout center">
  <div class="horizontal layout">
    <div class="flex"></div>
    <paper-card heading="PAS MENU to go here"></paper-card>
    <div class="flex"></div>
  </div>
</div>
</template>
<script>
Polymer({
  is: 'pas-menu',
  behaviors :[PAS.RouteBehaviour,Polymer.NeonAnimatableBehavior],
  properties: {
    access: {
      type: Array,
      value: []
    }
  }
});
</script>
</dom-module>

当我加载所有这些并使用chome dev工具查看结果时，我发现该元素的高度为零，并且我可以看到它的唯一高度，它可以将纸张文本及其填充物引入。

最终结果是卡片位于内容区域的顶部（居中），卡片大小恰好围绕文本。为什么我会丢失全屏的高度，我需要做什么才能使卡垂直居中。

Answer 1

你在这里唯一的错误就是你的风格部分，纸卡的选择器是

paper-card而非paper-card: 如果你想看到它，还要给你的纸卡提供背景颜色或阴影， <div class='flex'></div>都没有用，因为父div已经居中。最后你的元素看起来像

＆＃13;

<dom-module id="pas-menu">
<template>
<style>
  :host
  {
    @apply(--layout-vertical);  // vertical layout for the host of pas-menu
    @apply(--layout-center-center); // make the host center its element
    // or if you want you to keep it simple
    // display:box 
    top: 350px; // margin-top for the element pas-menu
    
    }
  paper-card {
    width:400px;
    height:200px;
    background-color:gray // color to the paper-card or 
    @apply(--shadow-elevation-2dp);// use the predifined mixin for shadow elevation
  }
</style>
<div class="vertical layout center">
  <div class="horizontal layout">
   
    <paper-card heading="PAS MENU to go here"></paper-card>
  
  </div>
</div>
</template>
<script>
Polymer({
  is: 'pas-menu',
  behaviors :[PAS.RouteBehaviour,Polymer.NeonAnimatableBehavior],
  properties: {
    access: {
      type: Array,
      value: []
    }
  }
});
</script>
</dom-module>

＆＃13;

努力将元素定位在标题下方区域的中心位置

1 个答案: