[SalesForce] lightning-tab align align center

I have only two tabs in lightning-tabset. And its align left. I need to have it in center. I tried padding-left: 200px; on ".slds-tabs" but nothing seems to be working. It works when i change through inspect element. But Nothings happening when i add code in componet's .css file.

here is playground's link : https://developer.salesforce.com/docs/component-library/tools/playground/BZGvQu4nV/8/edit

Is there any cleaner approach without using padding?
I know its very basic and silly question.
Any help would be appreciated.

Thanks,
Manohar

Best Answer

Personally, I try to avoid lwc components as soon as custom css is involved because of restrictions imposed by shadow dom

This gist leverages the slds tabs blueprint

I simply declared the .tab-container as flex, aligned the items to center, and each li item is also self centered.

example.html

<div class="slds-tabs_default">
    <ul class="slds-tabs_default__nav tab-container" role="tablist">
        <li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation" onclick={tabClick}>
        <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Item One</a>
        </li>
        <li class="slds-tabs_default__item" title="Item Two" role="presentation" onclick={tabClick}>
        <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Item Two</a>
        </li>
    </ul>
    <div id="tab-default-1" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
    <div id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
</div>

(sample method to toggle css classes for activating tabs - you can easily achieve the same for the content tabs)

example.js

    tabClick(e){
      const allTabs = document.querySelectorAll('ul>li');
      allTabs.forEach( (elm, idx) =>{
          console.log(elm);
          elm.classList.remove("slds-is-active")
      })
    e.currentTarget.classList.add('slds-is-active')
}

example.css

.tab-container {
    display:flex;
    align-items: center;
    justify-content: center;

}
.tab-container li{
  align-self: center;
}

Preview: enter image description here

Related Topic