CSS如何在Ionic中將項目居中

Question

我正在使用Ionic3，並且具有以下功能：

我想使離子卡居中對齊。

html

  <div class="contracted-content">

  <ion-card class="job-card">

    ...

  </ion-card>

  <div class="person-job">
    <ion-row>

      ...

    </ion-row>
  </div>

 </div>

腳本

.contracted-content {
    max-width: 369px;
    align-content: center;    
}

如您所見，我將最大寬度設置為369px，以使圖像不會變形。 現在，當瀏覽器的寬度增加到超過369px時，我想將div居中（ align-content: center;沒有影響）。

任何建議表示贊賞。

Answer 1

嘗試使用margin: 0 auto; 使您的元素居中

Answer 2

嘗試這個：

此處演示

的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>