diff --git a/demo/tabs-basic-demos.html b/demo/tabs-basic-demos.html
index 7ee0aa0..aec0108 100644
--- a/demo/tabs-basic-demos.html
+++ b/demo/tabs-basic-demos.html
@@ -28,6 +28,17 @@
Vertical tabs
+ Centered horizontal tabs
+
+
+
+ Tab one
+ Tab two
+ Tab three
+
+
+
+
Scrollable horizontal tabs
diff --git a/src/vaadin-tabs.html b/src/vaadin-tabs.html
index 2b7489c..7587148 100644
--- a/src/vaadin-tabs.html
+++ b/src/vaadin-tabs.html
@@ -36,6 +36,10 @@
-ms-overflow-style: none;
}
+ :host([orientation="horizontal"][centered]) [part="tabs"] {
+ justify-content: center;
+ }
+
/* This seems more future-proof than `overflow: -moz-scrollbars-none` which is marked obsolete
and is no longer guaranteed to work:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Mozilla_Extensions */
@@ -121,6 +125,7 @@
* Attribute | Description | Part name
* -----------|-------------|------------
* `orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host
+ * `centered` | Center tabs horizontally. Ignored for vertical tabs, incompatible with scrolling. | :host
* `overflow` | It's set to `start`, `end`, none or both. | :host
*
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
@@ -155,6 +160,14 @@
type: String
},
+ /**
+ * Center tabs horizontally. Ignored for vertical tabs, incompatible with scrolling.
+ */
+ centered: {
+ value: false,
+ type: Boolean
+ },
+
/**
* The index of the selected tab.
*/