Semantic-ui: [Tab] Centered Tab

[rafalradomski]

Be default all tabs are on the left: https://semantic-ui.com/modules/tab.html

How I can achieve centered Tab like in Bootstrap 4 ?

There is no example of centered tab in Semantic doc

[awgv]

Hi @rafalradomski, it doesn’t exist. Would you like to request it?

[rafalradomski]

@Banandrew I surprised no one asks about it before, it's common use case on centered pages

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[Atulin]

I'd rather it doesn't disappear in a pile of stale issues, so here's some activity from me: I'd also like to have a way to have my tabs centered.

[franckpopchef]

Just ran in the same issue. Would be great if it is implemented.

[franckpopchef]

Quick CSS fix:
Add margin-left: auto to the first child of the menu and margin-right: auto to the last child.

Example:

.ui.secondary.pointing.menu a:first-child {
  margin-left: auto;
}

.ui.secondary.pointing.menu a:last-child {
  margin-right: auto;
}

Result:

[qGosha]

Was able to center menu in tab by adding style prop to menu shorthand:
<Tab menu={{ attached: true, tabular: true, style: { display: "flex", justifyContent: "center" } }} panes={panes} />

[lubber-de]

Implemented since Fomantic-UI 2.5
https://fomantic-ui.com/modules/tab.html#centered-item

[peterdresslar]

Quick CSS fix:
Add margin-left: auto to the first child of the menu and margin-right: auto to the last child.

Example:

.ui.secondary.pointing.menu a:first-child {
  margin-left: auto;
}

.ui.secondary.pointing.menu a:last-child {
  margin-right: auto;
}

Result:

Worked for me (thanks @franckpopchef); here is a sandbox example:
https://codesandbox.io/s/semantic-ui-example-center-tabs-8deuf