0

I have the following code in an HTML component.I have applied bootstrap for loading prebuilt components like buttons. Its aligning very weirdly, I'm not the strongest guy at HTML alignment more of a backend/infra guy. How do I go about learning how to groups divs together so that I can align them as needed?

My objective with this question is to center these elements on the screen in a way so that one is on top of the other.

Here's what it looks like-

How do I get heading for Component to be set right above the choose file element? enter image description here

I need center align all these elements on top of one another.

.upload-form-component {
  margin: 400px 500px;
  /* I have added the !important attribute just for debugging, you can remove it. */
}

.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>
the.lotuseater
  • 83
  • 1
  • 8
  • 1
    It looks like you're using the Bootstrap library in one form or another. That's critical information to mention as Bootstrap provides robust layout features, and you should tag the appropriate version. – isherwood Apr 12 '23 at 20:38
  • 1
    Protip: Anytime you find yourself with 500px of margin you're probably doing something wrong. Please revise your post to explain more clearly what you're trying to accomplish. – isherwood Apr 12 '23 at 20:40
  • 1
    I have a feeling that this is relevant: [Bootstrap Center Vertical and Horizontal Alignment](https://stackoverflow.com/questions/42388989/bootstrap-center-vertical-and-horizontal-alignment) – isherwood Apr 12 '23 at 20:43

2 Answers2

1

One of the approaches using flex, Add this css in class .upload-form-component

.upload-form-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 400px 500px;
}
ashirhusaain
  • 255
  • 2
  • 6
  • Thanks this works, unfortunately I think I did not ask the question completely. Please allow me to update the question. Its about the text on top. – the.lotuseater Apr 12 '23 at 21:05
0

i see you are using bootstrap, the grid system may help https://getbootstrap.com/docs/5.2/layout/grid/

you can put the three buttons in diferent rows but in the same column: for example:

<div class="container text-center">
  <div class="col">
    <div class="row">
      button
    </div>
    <div class="row">
      button
    </div>
    <div class="row">
      button
    </div>
  </div>
</div>
Math.Random
  • 67
  • 7