使用Bootstrap主题和在页面中心对齐表单

Question

我想把我的表单放在页面的中心(就像在Google主页上)，但我在这样做时遇到了问题。我正在暗中使用Bootswatch主题(从CDN托管)。

在app.component.html中，我有：

<div>

      <div class="containercenter">
        <form>
          <fieldset>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </fieldset>
        </form>
      </div>

</div>

然后在app.component.css中：

#containercenter {
  width: 100%;
  height: 100%;
  align-items: center;

}

我已经尝试了css文件中的各种东西，包括填充，高度，宽度，对齐内容，...但这些似乎都不管用。我也尝试过摆弄HTML/Bootstrap id或class，不同的div。但一切都没有奏效。

如何为我的网页创建类似Google的布局？？

有关更多信息，请参阅：https://github.com/gf1721/directoryapp

Answer 1

将您的#containercenter更改为.containercenter，并将css更改为以下内容。

        .containercenter {
        width: 50%;
        margin: 0 auto;
        }

目前，您的代码没有做任何事情，因为您已经定义了一个容器中心类，但是您已经在css中指定了查找具有容器中心的id。在CSS中，我们用.classname表示类，用#idname表示id。

当您使用id时，您的HTML将是

<div id="containercenter">

希望这是有意义的，如果你需要的话，我很乐意进一步阐述。

Answer 2

你需要一个具有100%视窗高度的容器，检查html和body标签是否至少有100%的高度，然后使用Bootstrap 4 flex类轻松地水平和垂直居中。

app.component.css：

html, body{
    width: 100%;
    height: 100%;
}
.containercenter{
    height: 100%;
}

删除父div并执行以下操作

app.component.html

<div class="containercenter d-flex justify-content-center align-items-center">
    <form>
        <fieldset>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        </fieldset>
    </form>
</div>

引导Flexbox帮助器：

https://getbootstrap.com/docs/4.0/utilities/flex/

如果你想了解css Flexbox是如何工作的，这里有一个很好的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/