Daniel Groh Daniel Groh - 5 months ago 97
CSS Question

Center span element under an image element (Ionic2)

How to centralize this span under the avatar using flex?

enter image description here

The avatar image is well centralized if I remove the span, but when I insert the span, even with

display:block
it 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>


That 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);
}
}

Answer
ion-avatar {
    display: flex;
    flex-direction: column;    /* align flex items vertically */
    justify-content: center;   /* center items vertically, in this case */
    align-items: center;       /* center single-line items horizontally, in this case */
    align-content: center;     /* center multi-line items horizontally, in this case */
}

An initial setting of a flex container is flex-direction: row, meaning items will align horizontally. For vertical alignment, override the default with flex-direction: column.

Note that when you switch flex-direction, keyword alignment properties such as align-items and justify-content switch direction, as well.

More details: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Comments