Question

我正在尝试将此表格水平和垂直放置在中间。使用了正确的Bootstrap 4类来实现它，但它仍位于导航栏附近的顶部。

代码如下：

表单屏幕

  <section id="cover">
<div class="container-fluid fill">
    <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <form action="">
                <div class="form-group">
                    <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="User email" type="text">
                </div>
                <div class="form-group">
                    <input class="form-control form-control-lg" placeholder="Password" type="password">
                </div>
                <div class="form-group">
                    <button class="btn btn-info btn-lg btn-block">Sign In</button>
                </div>
            </form>
        </div>
    </div>
</div>
</section>

应用程序屏幕

我使用的是角形，因此稍后每个组件屏幕都会经过应用程序组件，这就是为什么我还要放置应用程序组件代码的原因：

<div class="container-fluid">
<app-header> </app-header>
</div>
<div class="container-fluid fill">
<router-outlet> </router-outlet>
</div>

这也是CSS：

.container-fluid{
    padding:0;
}

.fill { 
    min-height: 100%;
    height: 100%;
}

那么我该如何从顶部在屏幕中央移动表格呢？

Answer 1

您需要做的是将表单放在高度为100％的元素中，以证明您的内容合理，如下所示：

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
     <section id="cover" class="col-12">
     <div class="container-fluid fill">
      <div class="row d-flex justify-content-center align-items-center h-100">
       <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
        <form action="">
            <div class="form-group">
                <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="User email" type="text">
            </div>
            <div class="form-group">
                <input class="form-control form-control-lg" placeholder="Password" type="password">
            </div>
            <div class="form-group">
                <button class="btn btn-info btn-lg btn-block">Sign In</button>
            </div>
        </form>
    </div>
   </div>
   </div>
   </section>
  </div>  
 </div>

在您的CSS中

body,html{
height:100%;
}

这里是demo of your form

无法将表格垂直和水平放置在屏幕中央

1 个答案: