CSS如何在Ionic中将项目居中

Question

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.

Answer 1

Try using margin: 0 auto; to center your element

Answer 2

try this:

DEMO HERE

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>