javascript - CSS 垂直对齐生成的纯文本

Question

我试图在 Angular 中排列一些由 ng-for 生成的纯文本，但我似乎无法让它工作。

我目前得到的结果是:

E |

一个|

D |

G |

B |

E |

---7--

21-----

----20-

-----18

-5----

0-----

-19----

----16-

----22-

-----10

--9---

-----5

---14--

----21-

---13--

--4---

-19----

13-----

---18--

-----0

--15---

---17--

---4--

----1-

11-----

--24---

---2--

10-----

-21----

23-----

我希望结果看起来像

E | -21

一个 | --

D | --

G | 7-

乙 | --

E | --

所有行都垂直对齐。

我一直在尝试 flex，但我似乎无法弄清楚如何排列。

请帮忙!

.container-1{
  display:flex;
  flex-direction: column;
}

.box-1{
  flex:1
}

.container-2{
  display:flex;
  flex-direction: row;
}

<div class = "container-1">
    <div class="box-1">
        <div class="box-1">E |</div>
        <div class="box-1">A |</div>
        <div class="box-1">D |</div>
        <div class="box-1">G |</div>
        <div class="box-1">B |</div>
        <div class="box-1">E |</div>
      </div>
  <div class = "container-2" *ngFor="let currentTab of tabs;">
    <div *ngIf="currentTab.string == 0; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 1; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 2; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 3; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 4; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 5; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
  </div>
</div>

Answer 1

使用 flex 容器的 [align-items][1] 属性并将其设置为 center。

.container-1 {
...
  align-items: center;
}

.container-1{
  display:flex;
  flex-direction: column;
  align-items: center;
}

.box-1{
  flex:1;
}

.container-2{
  display:flex;
  flex-direction: row;
}

<div class = "container-1">
    <div class="box-1">
        <div class="box-1">E |</div>
        <div class="box-1">A |</div>
        <div class="box-1">D |</div>
        <div class="box-1">G |</div>
        <div class="box-1">B |</div>
        <div class="box-1">E |</div>
      </div>
  <div class = "container-2" *ngFor="let currentTab of tabs;">
    <div *ngIf="currentTab.string == 0; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 1; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 2; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 3; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 4; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 5; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
  </div>
</div>