Question

我只想让文字像：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Push, PushToken } from '@ionic/cloud-angular';
import { SomeOtherPage } from '...';

export class HomePage {

  constructor(private push: Push
    public navCtrl: NavController) {
        push.register().then((t: PushToken) => {
          return this.push.saveToken(t);
        }).then((t: PushToken) => {
          console.log('Token saved:', t.token);
        });
        this.push.rx.notification().subscribe((msg) => {
          this.navCtrl.push(SomeOtherPage, { msg: msg });
        });
  }
}

但是使用弹性框

＆＃13;

display: table-cell;
vertical-align: middle;

＆＃13;

div {
  border: 1px solid black;
}

.box {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
  align-items: stretch;
  height: 200px;
}

.box div {
  order: 1;
  flex: 0 1 auto;
  align-self: auto;
  min-width: 0;
  min-height: auto;
}

.box div.C {
  flex: 1 1 auto;
}

＆＃13;

Answer 1

＆＃13;

div {
  border: 1px solid black;
}

.box {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
  align-items: stretch;
  height: 200px;
}

.box div {
  order: 1;
  flex: 0 1 auto;
  align-self: auto;
  min-width: 0;
  min-height: auto;
  display: flex;            /* NEW */
  align-items: center;      /* NEW */
}

.box div.C {
  flex: 1 1 auto;
}

＆＃13;

<div class="box">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
  <div class="F">F</div>
</div>

＆＃13;

说明

flex formatting context的范围仅限于父子关系。子项之外的Flex容器的后代不参与flex布局，并将忽略flex属性。

在布局中，.box元素是flex容器（父元素），div元素是flex项（子元素）。因此，justify-content，align-content和align-items规则适用于div。

但是，文字是另一个级别。它超出了这个flex容器的范围。该文本被视为Flex容器的flex项目/ grand子项的子元素。因此，文本无法接受flex属性。

在CSS中，未由元素显式包装的文本由内联框在算法上包装。这使它成为匿名内联元素和父级的子项。

来自CSS规范：

9.2.2.1 Anonymous inline boxes

任何直接包含在块容器元素中的文本都必须被视为匿名内联元素。

flexbox规范提供了类似的行为。

4. Flex Items

Flex容器的每个in-flow子项都变为flex项，并且每个连续的文本行都直接包含在flex中   容器包装在一个匿名的flex项目中。

因此，文本是弹性项目的子元素。

所以你需要做的就是将flex项目变成一个flex容器。然后，您可以重复居中规则以垂直和/或水平居中文本。

如何在弹性项目中垂直居中文本？

1 个答案:

说明