如何在离子2应用程序中居中图像

Question

你好,我在离子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

您可以使用离子CSS实用程序通过将属性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>