web-dev-qa-db-ja.com

ionic 2アプリで画像を中央に配置するにはどうすればよいですか

こんにちは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をテストしましたが、運がありません。どうすればそれを達成できますか。

cssangularionic-framework
8
jmann

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>
21
maninak
<ion-content text-center>
    <p align="center"><ion-img src="assets/imgs/logo.png" width="128"></ion-img></p>
</ion-content>
0
Abdul Mojid