CSS垂直对齐生成的纯文本

Question

Im trying to line up some plain text generated by an ng-for in Angular and I cant seem to get it to work.

I'm currently getting the result:

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

And I want the result to look like

E | -21

A | --

D | --

G | 7-

B | --

E | --

So vertically aligned for all rows.

I've been trying flex but I cant seem to figure out how to line things up.

Please help!

 .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

use the [align-items][1] property of your flex container and set it to 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

I'm not a hundred percent sure on what you want to achieve exactly.

I created borders around each div, so you can see the result. Please elaborate further on what it should do.

 .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

I have updated your code for the desired result. It still has room for lot of improvement.

 .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

I hope it'll help you out. Thanks

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