How to center Tabs on Elementor

How to center the Tabs on the Elementor

Did you ever need to use the Elementor tabs widget (or Tabs), and needed to center the tabs, but did not find these options in the widget? (unfortunately this option does not even exist in the Widget).

Yeah, you’re not the only one. I have received this doubts on social networks and through our consultancy. So, without much fanfare, let’s get the solution!

How to center the tabs?

It’s simple, you’ll need to use CSS code that can be inserted into the Elementor widget itself (if you’re using the PRO version) or the CSS editor for your theme.

.elementor-tabs-wrapper {
    display: flex;
    justify-content: center;
}

Ready, the result will be this:

How to center the Tabs on the Elementor

I hope that you enjoyed.

Do you like the post? Please, leave your comment!

Want the latest updates?

Get first-hand access to our plugins updates and news.

Wordpress Developer

Eduardo Villão

Thanks for access my website! I am a Brazilian WordPress developer. Working with programming and WordPress since 2014. Currently developing custom plugins and solutions for WordPress, and work in partnership with companies worldwide.

17 Responses

  1. great information! thanks,
    BTW, how to set the active tab title with a underline, like nav menu?
    I tried many ways, does not work well.

  2. Thank you, you are the man man!!!

    @Rodger
    a:focus {
    text-decoration: underline;
    text-decoration-color: #306999;
    }
    a:hover {
    text-decoration: underline;
    text-decoration-color:#306999;
    }
    a:active {
    text-decoration: underline;
    text-decoration-color: #306999;
    }

    1. Yes, you can add the css direct on your theme custom CSS. Check on Appearance->customize and search for place to add Custom CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *