Seeking guidance on HTML alignment using bootstrap for prebuilt components like buttons. Struggling with aligning divs and looking to learn more about grouping them together for proper alignment.
Goal is to center elements on screen one above the other.
Current layout needs improvement:
How can I position the heading for Component right above the choose file element? https://i.sstatic.net/VrxtQ.png
Require all elements to be aligned at the center vertically.
.upload-form-component {
margin: 400px 500px;
/* added !important for debugging, remove if unnecessary */
}
.upload-container {
align-items: center;
display: grid;
flex-direction: row;
}
.main-text-box {
font-size: 30px;
text-align: center;
}
.upload-button {
align-items: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
}<main>
<div class="upload-container">
<div class="main-text-box">Heading for Component</div>
<div class="upload-form-component">
<input class="form-control" type="file" (change)="onChange($event)">
<button (click)="onUpload()" class="btn btn-success upload-button">
Upload
</button>
</div>
</div>
</main>