Centered tabs

[remicastaing]

Is there a way to center tabs like in G+?

[bonatoc]

On line 48 of https://github.com/angular/material/blob/master/src/components/tabs/tabs.scss,
it looks like center is an (ng-)attribute of md-tabs.

I have no time to try it right now, but I would like if you give me some feedback if you test it, thank you.

[bonatoc]

I think you can "only" stretch them, see the doc.

So maybe you can place them into another fixed-width container that is centered (think flexbox), so the tabs do not stretch on all the topnav's width, like in the example you are showing.

[bonatoc]

OK I think I have it. See this codepen and please let me know.

[remicastaing]

It works well. Thank you, @bonatoc for taking the time.

I adapted your code a little for small sized screen: codepen.

[remicastaing]

Should we keep this issue open and tagged as improvement?

[bonatoc]

I'm not sure.

We could contribute by making a md-centered-tabs attribute following the "wrapped-inside-centered-container" method in the codepen above and request a pull.

But I think the md-stretch-tabs attribute already does the job.
Frameworks are there to be hacked, worked with.
We can't expect them to have all the options, and I don't think it is the way to go. You end up overbloating it (see Bootstrap...).

[bonatoc]

Maybe you could tagged the issue as improvement for the demos ?

Many devs would like the centered tabs option displayed as an example.

Can we fork the docs a make a pull request on the demos?

[remicastaing]

I tried to write a simple md-centered-tabs directive, but it is not simple. I gave up.

Your solution, @bonatoc, should be kept somewhere. She's very useful.

[robertmesserle]

Support for centered tabs is on my list, and I will be hopefully getting to this today.