纸质项目，在其中正确居中项目

Question

我正在尝试将一些内容放置在 paper-item 中，更准确地说，我正在尝试将内容水平居中和垂直居中，但它不起作用。我可能做错了一些非常简单的事情。

代码如下：

  <paper-item style="background: blue; height: 200px;">
    <div horizontal layout center style="background: green;" flex>
      <div style="background: red; text-align: center;" flex>
          Lägg till
      </div>
    </div>
  </paper-item>

结果：预期结果：

Answer 1

为您的模板添加样式

<style>
    paper-item::shadow .button-content {
        padding: 0;
        height: 100%;
    }
</style>

Answer 2

您可以尝试使用 self-center 属性，但在本例中它是父元素 div 必须明确设置其高度。

示例：

<paper-item style="background: blue; height: 200px;">
    <div horizontal layout center style="background: green;" flex>
      <div style="background: red" center-center self-center flex>
          Lägg till
      </div>
    </div>
</paper-item>

有关布局属性的更多信息，请访问：https://www.polymer-project.org/docs/polymer/layout-attrs.html

纸质项目，在其中正确居中项目

paper-item, center item correcly inside it

javascript

polymer

flexbox