web-dev-qa-db-ja.com

Ionic：divを中央に配置する方法は？

状況：

Ionic framework を使用してアプリを作成しています。 1ページに画像を表示する必要があります。この画像は水平方向に中央揃えする必要があります。

ATTEMPT 1：

documentation iの後、1つの行を3つの等しい列に分割し、2番目の行に画像を配置します。

 <div class="row">
    <div class="col col-33"></div>
    <div class="col col-33">
        <img src="{{ data.logo }}" alt="">
    </div>
    <div class="col col-33"></div>
 </div>

しかし、残念なことに、画像は中央に寄せられません。画面の左半分に留まる傾向があります。

ATTEMPT 2：

いくつかの古いcssトリックを試してみてください。

<div style="margin: 0 auto;">
    <img src=" {{ data.logo }} " alt="" >
</div>

しかし、再び私は望ましい結果を得ていません。

質問：

Ionicフレームワークでdivを中央に配置するにはどうすればよいですか？

htmlcssangularjsionic-framework
38
FrancescoMussi

Ionic Framework 2 では、 属性ディレクティブcenterおよびtext-centerを使用できます。

<ion-row>
  <ion-col text-center>
    <a href="#">My centered text</a>
  </ion-col>
</ion-row>
29
0x1ad2

あなたはすでにあなたの答えを見つけましたが、私は代わりにそのようなことをします：

CSSで：

.center {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

次に、このクラスを画像に追加します。

 <img src="{{ data.logo }}" class="center" alt="">

この方法では、各画像を個別に調整する必要はありません。HTMLを見ると、これが非常にわかりやすいと思います。また、特定の画像サイズに制限されません。

51
Avi

widthスタイルを追加すると、2回目の試行が機能します。幅は画像の幅にする必要があります。

<div style="margin: 0 auto; width:100px">
    <img src=" {{ data.logo }} " alt="" >
</div>
6
Michael

これは動作するはずです、col-centerclassを追加するだけです：

<div class="row">
   <div class="col col-33"></div>
   <div class="col col-33 col-center">
      <img src="{{ data.logo }}" alt="">
   </div>
   <div class="col col-33"></div>
</div>
4
michelem

シンプル：

<div align="center">
    <img style="height:100px;width:100px" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" />
</div>
0
Khurshid Ansari

Divの中心を合わせるには、マージン0の自動が最適なオプションですが、このためには、divの中心部分を見つけるためにdivに適切なスペースを提供する必要があるため、いくつかを提供する必要があります。

margin 0 autoとともに適切な幅を指定して、divがその中心位置を見つけられるようにします。

0
jalaj sharma