Tabstrip Tab Alignment

[Christy]

Our client has a request to center-align the tabs on the tabstrip. We currently have them over to the left, and I can see how to use rtl to move them over to the right. Is there a way to move them to the center? We would need the tab content to be to the LEFT and right of each tab as shown in the attached file.

Thanks!

Christy

[Christy]

Not sure why the attachment did not come through. 

[Christy]

Found a way to do this:

.k-tabstrip.k-header > ul.k-reset {
  padding-left: 50px;
}

[Dimiter Topalov]

Hello Christy,

Thank you for sharing the working approach with the community. While it is perfectly valid, you can also utilize CSS flex to make this more generic and the list items to be centered regardless of the exact width of the viewport:

>>> .k-tabstrip.k-header > ul.k-reset {
          display: flex;
          justify-content: center;
          width: 100%;
        }

        >>> .k-tabstrip.k-header > ul.k-reset > li {
          flex: 0 1 auto;
        }

https://plnkr.co/edit/d5cclLUzNtdTTgFowKLN?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik