How to centralize this span under the avatar using flex?
The avatar image is well centralized if I remove the span, but when I insert the span, even with display:blockit displays on the right side.
Here is my HTML:
<ion-navbar *navbar>
<ion-avatar item-center>
<img src="img/bill-gates-avatar.jpg">
<span>Bill Gates</span>
</ion-avatar>
</ion-navbar>
<ion-content padding>
Content here...
</ion-content>
Here is my SCSS:
.tabs {
ion-navbar-section {
min-height: 16.6rem;
}
.toolbar {
min-height: 170px;
}
ion-avatar {
display: flex;
justify-content: center;
align-content: center;
}
ion-avatar img {
max-width: 8rem;
max-height: 8rem;
border-radius: 5rem;
border: 2px solid color($colors, light);
}
}