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

Caio Wilson 发表于 Dev

凯奥·威尔逊

根据文档，我想将我的元素垂直居中在此核心工具栏中，我可以使用“中间”类或水平居中布局来实现。但无论哪种方式都行不通。

提前致谢。

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

DocDude

因此，您是对的，这在中等高度的工具栏中不起作用。我不确定是否应该这样做。它确实可以通过“高大”工具栏正常工作。

示例：http：//jsbin.com/fitahe/27/edit？html，输出

我已经提交了一个错误进行澄清。我认为这可能是故意的，我们只需要改进文档即可。

该工具栏的设计与材料设计规范保持一致，该规范基本上指出该工具栏可以是单高度，双高度或三高度（其中“中高”是两倍高度，“高”是三倍高度）。它指定控件应固定在较高工具栏的顶部或底部，您可以使用“ top”和“ bottom”类来完成。

对于三倍高度的核心工具栏，它还为“中间”类提供支持。尚不清楚这是否符合材料设计指南，但似乎足够合理。

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

阅读完所有内容后，如果您仍然希望将内容放在中等高度的工具栏上，请使用以下CSS替代中间栏样式：

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

示例：http：//jsbin.com/fitahe/32/edit？html，输出

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。