CSS垂直對齊生成的純文本

Question

我試圖在Angular中排列由ng-for生成的一些純文本，我似乎無法使其工作。

我目前正在得到結果：

E |

A |

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

A | -

D | -

G | 7-

B | -

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> 

Answer 2

我不是百分百肯定你想要達到的目標。

我在每個div周圍創建了邊框，因此您可以看到結果。 請進一步詳細說明應該做些什么。

 .main { display: flex; } .main div { border: 1px solid rgba(0, 0, 0, .2); } .container-2 { flex: 1; } 

 <div class="main"> <div class="container-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 3

我已更新您的代碼以獲得所需的結果。 它仍有很大的改進空間。

 .container-1 { display:flex; flex-direction: row; } .box-1 { display: flex; flex-direction: column; width: 4%; } .container-2 { display: flex; flex-direction: column; width: 2%; text-align: center; } 

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

Answer 4

我希望它會幫助你。 謝謝

 .container-wrapper { display: flex; } .box-1{ white-space: nowrap; } 

 <div class="container-wrapper"> <div class="container"> <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" *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>