Hello people… how can a align a ionList that have a *ngFor of ion-cards ?
align vertically in the center
i try this… and all the variations that i could think of:
display: flex;
align-content: center;
align-items: center;
justify-content: center;
justify-items: center;
vertical-align: middle;
here a print
rtalexk
September 2, 2017, 7:52pm
2
You need to inspect elements to see what is going on.
What is your template?
If you inspect elements in Chrome you’ll see if ion-card
is either taking all width or not.
Which element has display: flex;
Is it the immediate parent of ion-card
s?
Neonic1
September 2, 2017, 8:07pm
3
If you’re aligning why not just use the rows and the columns?
Ionic V1 (if I remember right):
<div class="row">
<div class="col col-4">left column</div>
<div class="col col-4">middle column</div>
<div class="col col-4">right column</div>
</div>
There’s also rules and properties to which can align to special sides per-request/pull options.
Ionic V2+:
<ion-row>
<ion-col col-4>
Left
</ion-col>
<ion-col col-4>
Middle
</ion-col>
<ion-col col-4>
Right
</ion-col>
</ion-row>
I haven’t used Ionic V2+ Grids/Rows/Columns before.
Columns should always be equivalent to 12 in total (unless Ionic changed something in new updates).
Refer to the Docs:
ion-grid: Display Grids for Mobile-First Custom App Layout
Regards,
Neonic1