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

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。在 CSS 中，我们使用 .classname 表示类，使用 #idname 表示 id。

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

<div id="containercenter">

希望这是有道理的，如果您需要，我很乐意进一步阐述。