イオニック中心のテキスト画面上で縦横に

Question

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

<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> 

Answer 1

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> 

Answer 2

？ とにかくテキストを水平に集中させるには、align="center"を使用することもできます。 は（それを明確にするために、私は、行に色やCOLを追加しました。）

<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> 

Answer 3

このソリューションをお試しください：

1.Add新しい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.Apply homeクラスion-viewへ：

<ion-view class="home">

demo

Answer 4

これは、イオン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; 
} 
}