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

{{1}}

Answer 2

这适用于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;
 }
}

Answer 3

试试这个解决方案：

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

demo

Answer 4

如何指定＆＃34;身高＆＃34;？无论如何，将文本集中在水平，您也可以使用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>

离子中心文本在屏幕上垂直和水平

4 个答案: