CSS如何離子

Question

我使用Ionic3中心項目，並具備以下條件：

我想中心對齊離子卡。

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

正如你所看到的，我的最大寬度設置爲369px，使圖像不變形。現在，當瀏覽器寬度增加超過369px時，我想集中div（align-content: center;沒有任何影響）。

任何意見讚賞。

Answer 1

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

Answer 2

試試這個：

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>