CSS如何离子

2017-05-29 87 views 0 likes

我使用Ionic3中心项目，并具备以下条件：CSS如何离子

我想中心对齐离子卡。

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;没有任何影响）。

任何意见赞赏。

来源

2017-05-29 Richard

您是否尝试过“margin：0 auto;” ？ –

感谢'保证金：0汽车;'工程！ – Richard

回答

尝试使用margin: 0 auto;来居中您的元素

来源

2017-05-29 09:35:35

试试这个：

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>

来源

2017-05-29 09:25:55

谢谢，但是当我尝试'translateX（-50％）'时，'它似乎将一半的卡从页面的左侧推出。 – Richard

我在上面的建议尝试'保证金：0汽车;'，它的工作原理。 – Richard

@Richard您需要设置相对位置（请参阅我的演示），但如果其他解决方案适用于您，请使用其他:) –

CSS如何离子

回答

相关问题