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



http://jsbin.com/fekiyi/1/edit

我想在这个核心工具栏中垂直居中我的元素,根据文档,我可以用"中间"类或水平居中布局来实现。但不管怎样都不行。

提前谢谢。

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

所以,你是对的,这在中等高度的工具栏中不起作用。我不确定它是否应该。它确实可以像预期的那样使用"高"工具栏。

示例:http://jsbin.com/fitahe/27/edit?html,输出

我已经提交了一个bug以供澄清。我认为这可能是故意的,我们只需要改进文档。

工具栏的设计与材料设计规范相协调,材料设计规范基本上规定工具栏可以是单高度、双高度或三高度(其中"中等高度"是两倍高度,"高"是三倍高度)。它指定控件应固定在较高工具栏的顶部或底部,您可以使用"顶部"one_answers"底部"类执行此操作。

在三重高度核心工具栏的情况下,它还提供了对"中间"类的支持。目前尚不清楚这是否符合材料设计指南,但似乎足够合理。

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

如果在阅读了所有内容后,你仍然想将内容集中在中等高度的工具栏上,这里有一些CSS可以覆盖中间条样式:

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

示例:http://jsbin.com/fitahe/32/edit?html,输出

最新更新