web-dev-qa-db-ja.com

Ionic画面上のテキストを垂直および水平に中央揃え

画面上でテキストを垂直に揃えようとしています。これを行う方法について ドキュメント を読みました。しかし、私はまだ運がありません。これは私のコードです：

<div class="row">
  <div class="col col-center text-center">
    <h4 class="gray">This text is in the center of the screen</h4>
  </div>
</div>
ionic-frameworkionic
19
user818700

[〜＃〜] html [〜＃〜]

<div class="row">
    <div class="col">
        <div class="text-center">
            <h5 style="text-align: center;">This text is in the center of the screen</h5>
        </div>
    </div>
</div>
16
Muhsin

これはIonic Framework 3.0.1で動作します：

HTML：

<ion-content padding>
 <div>
  <h4 class="gray">This text is in the center of the screen</h4>
 </div>
</ion-content>

SASS：

ion-content {
 div {
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
}
10
YogliB

この解決策を試してください：

1.新しいCSSスタイルを追加します。

.home .scroll-content {
  display: table !important;
  width: 100% !important;
  height: 100% !important;
  margin-top: -50px; /* the height of the centered content */
  text-align: center;
}
.home .scroll {
  display: table-cell;
  vertical-align: middle;
}

2. homeクラスをion-viewに適用します：

<ion-view class="home">

デモ

6
alexmac

「高さ」の指定はどうですか？とにかく、テキストを水平方向に集中させて、align="center"。 （明確にするために、行と列に色を追加しました。）

<div class="row" style="height: 900px; background-color: blue;">
  <div class="col col-center" style="background-color: red;>
    <h4 class="gray" align="center">This text is in the center of the screen</h4>
  </div>
</div>
3
tkhm