CODEWITHSUNDEEP
htmlangularflexbox
user3738290
user3738290

Reputation: 445

How to align an Angular component horizontally and vertically in a div

Please could I as for help with the following:

I have the following HTML to make a fullscreen brown DIV:

<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: brown;">
<app-text-cloner style="display: flex; justify-content:center; align-items:center;"></app-text-cloner>

The HTML of the app-text-cloner is:

<input type="text" id="text1" name="text1" spellcheck="false" [(ngModel)]="m_text1">

  <input type="tex2" id="text2" name="text2" spellcheck="false" [(ngModel)]="m_text1">

I was hoping that this would produce a vertically and horizontally centered result, instead it's only horizontally centered:enter image description here

Thanks for any help...

Upvotes: 0

Views: 2572

Answers (1)

Jose7198
Jose7198

Reputation: 91

In this case I think what you need is to set a full height in the container i.e., height: 100%;. Try out:

<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: brown;">
<app-text-cloner style="display: flex; height:100%; justify-content:center; align-items:center;"></app-text-cloner>

Upvotes: 2

Related Questions