如何使表格居中

Question

我创建了一个联系表单，我尝试了表单，但 bootstrap 但无法将其移动到屏幕中央。你能帮我移动这个并在我做不到的 forms.Which 周围安排一个方框吗？我在 angular 8 中尝试这个

    <div class="container">
<h2 >Contact Form</h2>
<div class="container"> 
<form [formGroup]="profileForm"(ngSubmit)="onSubmit()">

  <div class="form-group row">
  <label class="col-sm-2 col-form-label"> Your Name:</label>
  <div class="col-sm-5">
    <input  type="text" class="form-control" formControlName="yourname" >
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-2 col-form-label"> Email: </label>
  <div class="col-sm-5">
    <input  type="text" class="form-control" formControlName="email">

  </div>
</div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label">  Items:</label>
    <div class="col-sm-5">
      <select id="Item" class="form-control" formControlName="item">

          <option *ngFor="let c of item"  [ngValue]="c">{{ c }}</option>

      </select>
    </div>
    </div>

  <div class="form-group row">
  <label class="col-sm-2 col-form-label"> Name: </label>
  <div class="col-sm-5">
    <input type="text" class="form-control" formControlName="name">
  </div>
  </div>


<div class="form-group row">
  <label class="col-sm-2 col-form-label">
    Remarks:</label>
    <div class="col-sm-5">
    <textarea class="form-control" type="text" formControlName="remarks" rows="3">
  </textarea>
</div>
</div>
<div class="dialog">
  <button type="submit" color=#C93C6A class="btn-block" [disabled]="!profileForm.valid">Submit</button>
</div>
  </form>
</div>  

</div>

CSS 下面:

.container {
    display: block;
    border: 2px black;
    border-radius: 4px;
    box-sizing: border-box 1px black;
  }

Answer 1

你可以这样做，你分享的代码内容有限。我只是试图解决这个问题。

使用justify-content: center; align-items: center;

这应该可以解决您的问题。

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

<div class="container">
  <h2>Contact Form</h2>
  <div class="container">
    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

      <div class="form-group row">
        <label class="col-sm-2 col-form-label"> Your Name:</label>
        <div class="col-sm-5">
          <input type="text" class="form-control" formControlName="yourname">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label"> Email: </label>
        <div class="col-sm-5">
          <input type="text" class="form-control" formControlName="email">

        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label">  Items:</label>
        <div class="col-sm-5">
          <select id="Item" class="form-control" formControlName="item">

            <option *ngFor="let c of item" [ngValue]="c">{{ c }}</option>

          </select>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label"> Name: </label>
        <div class="col-sm-5">
          <input type="text" class="form-control" formControlName="name">
        </div>
      </div>


      <div class="form-group row">
        <label class="col-sm-2 col-form-label">
    Remarks:</label>
        <div class="col-sm-5">
          <textarea class="form-control" type="text" formControlName="remarks" rows="3">
  </textarea>
        </div>
      </div>
      <div class="dialog">
        <button type="submit" color=#C93C6A class="btn-block" [disabled]="!profileForm.valid">Submit</button>
      </div>
    </form>
  </div>

</div>

Answer 2

        <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h2>Contact Form</h2>
                    </div>
                    <div class="card-body d-flex justify-content-center">
                        <form class="w-75" [formGroup]="profileForm" (ngSubmit)="onSubmit()">

                            <div class="form-group row">
                                <label class="col-2 col-form-label"> Your Name:</label>
                                <div class="col">
                                    <input type="text" class="form-control" formControlName="yourname">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"> Email: </label>
                                <div class="col">
                                    <input type="text" class="form-control" formControlName="email">

                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"> Items:</label>
                                <div class="col">
                                    <select id="Item" class="form-control" formControlName="item">

                                        <option *ngFor="let c of item" [ngValue]="c">{{ c }}</option>

                                    </select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"> Name: </label>
                                <div class="col">
                                    <input type="text" class="form-control" formControlName="name">
                                </div>
                            </div>


                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">
                                    Remarks:</label>
                                <div class="col">
                                    <textarea class="form-control" type="text" formControlName="remarks"
                                        rows="3"></textarea>
                                </div>
                            </div>
                            <div class="dialog">
                                <button type="submit" color=#C93C6A class="btn-block"
                                    [disabled]="!profileForm.valid">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 3

您的代码是正确的，只需要稍作改动。您说您使用的是 bootstrap，所以我尝试使用 bootstrap 中的类来展示在此处的 css 中使用它的外观。但是，如果您只复制 html 内容，这将起作用。如果您需要任何进一步的帮助，请告诉我。

.container {
  width: 300px;
  border: 2px solid black;
  border-radius: 4px;
  padding: 10px;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.text-center {
  text-align: center;
}

.justify-content-center {
  justify-content: center;
}

.align-self-center {
  align-self: center;
}

<div class="d-flex flex-column">
  <div class="container align-self-center">
    <h2 class="text-center">Contact Form</h2>
    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

      <div class="form-group row">
        <label class="col-sm-2 col-form-label"> Your Name:</label>
        <div class="col-sm-5">
          <input type="text" class="form-control" formControlName="yourname">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label"> Email: </label>
        <div class="col-sm-5">
          <input type="text" class="form-control" formControlName="email">

        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label">  Items:</label>
        <div class="col-sm-5">
          <select id="Item" class="form-control" formControlName="item">

            <option *ngFor="let c of item" [ngValue]="c">{{ c }}</option>

          </select>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label"> Name: </label>
        <div class="col-sm-5">
          <input type="text" class="form-control" formControlName="name">
        </div>
      </div>


      <div class="form-group row">
        <label class="col-sm-2 col-form-label">
    Remarks:</label>
        <div class="col-sm-5">
          <textarea class="form-control" type="text" formControlName="remarks" rows="3">
  </textarea>
        </div>
      </div>
      <div class="dialog text-center">
        <button type="submit" color=#C93C6A class="btn-block" [disabled]="!profileForm.valid">Submit</button>
      </div>
    </form>
  </div>
</div>

Answer 4

使用 display 实现此设计的另一种方法：table 请仔细检查我的代码，如果您有任何疑问，请告诉我。

希望对您有所帮助。 :)

    .container {
    display: table;
    border: 2px black;
    border-radius: 4px;
    box-sizing: border-box 1px black;
        height: 100%;
    vertical-align: middle;
    margin: 0 auto;
  } 
  .container form {
    display: table-cell;
    vertical-align: middle;
}

    <div class="container">

<div class="container"> 
    
<form [formGroup]="profileForm"(ngSubmit)="onSubmit()">
<h2 >Contact Form</h2>
  <div class="form-group row">
  <label class="col-sm-2 col-form-label"> Your Name:</label>
  <div class="col-sm-5">
    <input  type="text" class="form-control" formControlName="yourname" >
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-2 col-form-label"> Email: </label>
  <div class="col-sm-5">
    <input  type="text" class="form-control" formControlName="email">

  </div>
</div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label">  Items:</label>
    <div class="col-sm-5">
      <select id="Item" class="form-control" formControlName="item">

          <option *ngFor="let c of item"  [ngValue]="c">{{ c }}</option>

      </select>
    </div>
    </div>

  <div class="form-group row">
  <label class="col-sm-2 col-form-label"> Name: </label>
  <div class="col-sm-5">
    <input type="text" class="form-control" formControlName="name">
  </div>
  </div>


<div class="form-group row">
  <label class="col-sm-2 col-form-label">
    Remarks:</label>
    <div class="col-sm-5">
    <textarea class="form-control" type="text" formControlName="remarks" rows="3">
  </textarea>
</div>
</div>
<div class="dialog">
  <button type="submit" color=#C93C6A class="btn-block" [disabled]="!profileForm.valid">Submit</button>
</div>
  </form>
</div>  

</div>

如何使表格居中

How can I make the form to center of screen

html

css

angular-forms