How can I center a floating button with a label exactly in the center of an ion-tabs component? I’m facing an issue where the display gets shifted to the right on certain mobile devices, as shown in the photo.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="albums-outline"></ion-icon>
<ion-label>Albums</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="people-outline"></ion-icon>
<ion-label>Accounts</ion-label>
</ion-tab-button>
<ion-tab-button></ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="card-outline"></ion-icon>
<ion-label>Card</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab4">
<ion-icon name="settings-outline"></ion-icon>
<ion-label>Settings</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button>
<ion-icon name="add-outline"></ion-icon>
</ion-fab-button>
<ion-label>Sinistres</ion-label>
</ion-fab>
I want make the io-tabs like design in Figma
