css - 如何在 ionic 2 应用程序中将图像居中

Question

你好，我在 ionic 2 应用程序中有一些页面，里面有一个 .. 像这样

<ion-content padding>
  <p>Some text here....</p>
  <p>Some other text here...</p>
  <ion-img width="180" height="180" src="assets/images/goal.jpg"></ion-img>  
  <p>bottom text here...</p>
</ion-content>

我需要看到图像水平居中。我已经测试了一些 css 但没有运气......我该如何实现？

Answer 1

您可以使用 ionic CSS utilities通过应用属性 text-center 来对齐中心到您想要水平居中的元素的父元素。

这是一个例子:

<ion-content text-center>
    <img src="assets/imgs/logo.png" width="128" />
</ion-content>

在你的情况下，我会包装 <img>在<div>这样它只影响图像而不影响 <p>元素。

像这样:

<ion-content padding>
  <p>Some text here....</p>
  <p>Some other text here...</p>
  <div text-center>
     <ion-img width="180" height="180" src="assets/images/goal.jpg"></ion-img>  
  </div>
  <p>bottom text here...</p>
</ion-content>