Question

我希望将我的元素垂直居中放在这个核心工具栏中，根据文档，我可以使用“中间”类或水平居中布局。但无论如何都无法发挥作用。

提前致谢。

<core-toolbar id="topo-do-titulo" class="medium-tall">

  <paper-icon-button id="navicon" icon="menu" class="middle"></paper-icon-button>

  <div id="titulo" class="indent middle" flex>Whatever Title</div>

  <paper-icon-button class="indent middle" id="viva-close-button" fill="false" icon="close">
    <a href="#" id="button_close"></a>
  </paper-icon-button>

  <paper-shadow z="1"></paper-shadow>
</core-toolbar>

Answer 1

所以，你是正确的，这不适用于中高工具栏。我不确定它是否应该。它确实按照预期的方式运行了一个高大的＆＃34;工具栏。

示例：http://jsbin.com/fitahe/27/edit?html,output

我已提交a bug进行澄清。我认为这可能是有意的，我们只需要改进文档。

工具栏的设计与材料设计规范相协调，它基本上表明工具栏可以是单一，双重或三重高度（其中＆＃34;中高＆＃34;是双高和＆＃34;身高＆＃34;是三倍高度）。它指定控件应固定在较高工具栏的顶部或底部，您可以使用＆＃34; top＆＃34;和＆＃34;底部＆＃34;类。

对于三高核心工具栏，它还支持＆＃34;中间＆＃34;类。目前尚不清楚这是否符合材料设计指南，但似乎足够合理。

不幸的是，它确实意味着您无法轻松地将内容垂直放在中高工具栏上，因为这不是控件的设计方式。任何固定在中间的东西都会与任何顶部和底部控件重叠。

如果在阅读完所有内容后仍然希望将内容集中在一个中高的工具栏上，可以使用一些CSS来覆盖中间栏样式：

core-toolbar.medium-tall::shadow #middleBar { -webkit-transform: translateY(50%); transform: translateY(50%); }

示例：http://jsbin.com/fitahe/32/edit?html,output

如何在核心工具栏聚合物组件中获得垂直居中

1 个答案: