纸品，正确的中心项目

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