Tabs: Make default text alignment consistent

[afercia]

Description

Noticed while working on https://github.com/WordPress/gutenberg/issues/62018

Wondering whether there is any reason why the text horizontal alignment for some tabs is left and for some tabs is centered. I would expect the alignment to be consistent across the UI.

Example screenshot from latest trunk:

• On the ledt: In the main inserter, the tabs text is aligned to the left.
• On the right: in the block inspector main tabs and controls tabs, the text is aligned to the center.

I'd think at least the default alignment should be always consistent. In the rare cases where a different alignment is desired, this should be done with a variant of the base component rather than with ad-hoc CSS.

Cc @WordPress/gutenberg-design

Step-by-step reproduction instructions

• Go to the post editor > Options > Preferences > Accessibility, and enable the 'Show button text labels' preference.
• Add a Navigation block and select it (or any other block that uses tabs in its inspector).
• Open the main inserter.
• Observe the tabs text alignment is inconsistent.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

Note: the left alignment doesn't look great, especially when the focus style is visible:

[HILAYTRIVEDI]

I think aligning it in the center looks nice.

[HILAYTRIVEDI]

Just adding justify-content:center will achieve the above.

.block-editor-inserter__tabs div[role=tablist] button[role=tab]{
         justify-content:center;
}

[DaniGuardiola]

Related: https://github.com/WordPress/gutenberg/pull/61974