How to center Tabs on 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.

If you like, leave your comment.

Share this:
Share on facebook
Facebook
Share on whatsapp
WhatsApp
Share on email
Email
Share on linkedin
LinkedIn

This Post Has 12 Comments

    1. Eduardo Villão

      Your welcome!

  1. Dorka

    Thank you!

    1. Eduardo Villão

      Your welcome!

  2. Huy

    Works great! Thanks!

    1. Eduardo Villão

      Your welcome!

  3. Jonah

    Brilliant, thank you!

    1. Eduardo Villão

      Your welcome!

  4. Shree

    Thanks man! Life saver!!

    1. Eduardo Villão

      Your welcome!

  5. rodger

    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.

  6. 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;
    }

Leave a Reply

Wordpress Developer
Eduardo Villão

WordPress developer and I live in Brazil. I work with programming and WordPress since 2012. I work in partnership with agencies and companies in the United States, Portugal, Spain, and Brazil.