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:
I hope that you enjoyed.
If you like, leave your comment.
This Post Has 12 Comments
Thanks man! What a very easy fix to implement 🙂
Your welcome!
Thank you!
Your welcome!
Works great! Thanks!
Your welcome!
Brilliant, thank you!
Your welcome!
Thanks man! Life saver!!
Your welcome!
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.
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;
}