I am using Ionic3, and have the following:
I would like to center align the ion-card.
html
<div class="contracted-content">
<ion-card class="job-card">
...
</ion-card>
<div class="person-job">
<ion-row>
...
</ion-row>
</div>
</div>
scss
.contracted-content {
max-width: 369px;
align-content: center;
}
As you can see, I set the max width to 369px, so that the image does not distort. Now, when the browsers width gets increased beyond the 369px, I would like to center the div
(the align-content: center;
has no affect).
Any advise appreciated.
Try using margin: 0 auto;
to center your element
try this:
CSS
.align-center{
display: inline-block;
position: relative;
left: 50%;
webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
HTML
<ion-card class="job-card align-center">
...
</ion-card>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.