Question

我想将我的表单放在我的页面中心（就像在Google主页上一样），但我遇到了问题。我使用的是Bootswatch主题Darkly（由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或类，不同的div。但没有任何效果。

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

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

Answer 1

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

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

目前，您的代码无效，因为您已定义了一类containercenter，但您已在css中指定查找带有containercenter的id。类.classname和ids #idname。

当您使用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>

Bootstrap Flexbox助手：

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

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

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

2 个答案: