Polymer 如何在核心组件中获得垂直居中

Polymer 如何在核心组件中获得垂直居中,polymer,Polymer,我想在这个核心工具栏中垂直居中放置我的元素,根据文档,我可以使用“中间”类或水平居中布局。但这两种方式都行不通 提前谢谢 <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="ind

我想在这个核心工具栏中垂直居中放置我的元素,根据文档,我可以使用“中间”类或水平居中布局。但这两种方式都行不通

提前谢谢

<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>

不管头衔是什么

没错,这在中等高度的工具栏中不起作用。我不确定是否应该这样做。使用“高”工具栏时,它确实可以正常工作

例如:

我已申请澄清。我认为这可能是故意的,我们只需要改进文档

工具栏的设计符合材质设计规范,该规范基本上规定工具栏可以是单高、双高或三高(其中“中高”是双高,“高”是三高)。它指定控件应固定在较高工具栏的顶部或底部,您可以使用“top”和“bottom”类来执行此操作

对于三倍高度的核心工具栏,它还支持“中产阶级”。目前尚不清楚这是否符合材料设计指南,但似乎足够合理

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

如果在阅读了所有这些内容后,您仍然希望将内容集中在中等高度的工具栏上,以下是一些CSS来覆盖中间条样式:


核心工具栏。中高::阴影#中间条{
-webkit转换:translateY(50%);
转化:translateY(50%);
}


示例:

谢谢,它很有效,尽管考虑到你所说的,我可能会将它改为“高”或将其与“顶”对齐,给我提供标题空间、制表符空间或一些材料设计,这可能对我的开发有帮助……我不知道。