如何在 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但没有成功。如何实现这个目标？

- jmann

Answer 1

您可以使用 Ionic 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>

- maninak

---

你的回答救了我。 - core114

Answer 2

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

- Abdul Mojid