How do I get vertical centering in a core-toolbar polymer component -

How do I get vertical centering in a core-toolbar polymer component -

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

i want vertically center elements within core-toolbar, according docs, "middle" class or horizontal centered layout. wont work either way.

thanks in advance.

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

so, you're correct, doesn't work in medium-tall toolbar. i'm not sure whether it's supposed or not. work expected "tall" toolbar.

example: http://jsbin.com/fitahe/27/edit?html,output

i've filed a bug clarification. think it's intentional, , need improve documentation.

the toolbar designed harmonize material design spec, states toolbars can single, double, or triple height (where "medium-tall" double-height , "tall" triple height). specifies controls should pinned top or bottom of taller toolbars, can using "top" , "bottom" classes.

in case of triple-height core-toolbar, provides back upwards "middle" class. it's not clear whether fits material design guidelines, seems reasonable enough.

unfortunately, mean can't center content vertically on medium-tall toolbar, because that's not way command designed. pinned in middle overlap top , bottom controls.

if after reading still want center content on medium-tall toolbar, here's css override middlebar styling:

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

example: http://jsbin.com/fitahe/32/edit?html,output

polymer