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

Posted 2023-03-06

【中文标题】如何在 ionic 2 应用程序中居中图像

【英文标题】：how can I center an image in ionic 2 app

【发布时间】：2017-11-18 12:40:11

【问题描述】：

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

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

我需要看到水平居中的图像。我已经测试了一些 css 但没有运气。我怎样才能做到这一点？

【参考方案1】：

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

这是一个例子：

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

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

像这样：

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

【讨论】：

你的答案救救我

【参考方案2】：

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