Tabs Widget: Unable to center the entire tab row

form 260411317631143

I failed to center the tab row. I managed to center the text vertically with line-height.. but cannot seem to center the whole row.

Hi stormingrobots,

Thanks for reaching out to Jotform Support. I checked your form and I can see that the Form Tabs widget is now centered on the page. It appears that you were able to resolve the issue.

Let us know if you need any other help.

no.. the tabs row does not center.

Hi stormingrobots,

I checked your form and saw that the Tabs List class is set to a fixed 100% width. Because of that, it stays at full width instead of adjusting to the form’s actual width. You can set it to auto instead so it follows the form’s width properly. Let me show you how:

1. In Form Builder, select the Form Tabs widget, then click on the Wand icon to open Widget Settings.

2. Next, in the menu that opens on the right, scroll down to the Custom Css box.

3. Look for the .tabs-list CSS selector, then change the width value from 100% to auto.

4. Finally, click on Update and that's it. You're done.

Check out the screenshot below to see how it looks on a cloned form:

If you want to add padding on both ends, remove the width property completely. That way, it won’t be forced to 100% and the padding will apply properly. Here's how it'll look after removing it:

Give it a try and let us know if you need any more help.

Thank you ... but

the text content in each tab seems to be really far..

I attempted to move the text closer to the awesome font icon. But, it became overlap with the icon. Please advice.

Hi stormingrobots,

Thanks for the update and for sharing the screenshot. I can see what you mean now. The tab row centering issue is separate from the new issue with the spacing between the Font Awesome icon and the tab text.

To keep the conversation organized, I moved your other question to its own thread, and someone from our Support Team will help you with it here.

Let us know if you need any other help.

Centering the entire tab row in a Tabs widget can be trickier than it sounds. I’ve run into cases where the container width or default flex alignment overrides any simple text-center styling. Sometimes you have to target the parent wrapper with custom CSS and adjust justify-content or margin: 0 auto. Small layout constraints often cause the issue.

thank you.