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

Posted 2023-03-05

【中文标题】使用 Bootstrap 主题和在页面中心对齐表单

【英文标题】：Using Bootstrap Theme and Aligning Form in Center of Page

【发布时间】：2018-06-23 10:17:42

【问题描述】：

我想将表单置于页面中心（例如在 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

【问题讨论】：

现代 Web 开发非常困难

【参考方案1】：

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

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

目前，您的代码没有执行任何操作，因为您定义了一个容器中心类，但您已在 css 中指定使用容器中心查找 id。在 CSS 中，我们使用 .classname 表示类，使用 #idname 表示 id。

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

<div id="containercenter">

希望这是有道理的，如果您需要，我很乐意进一步详细说明。

【讨论】：

它水平居中但不是垂直居中

我试过 margin-bottom: 0 auto;边距顶部：0 自动；但这没有帮助

padding-top: 100px; 例如，会做你需要的。

看看它，谷歌实际上也是这样做的:)

有没有办法使用 px 绕过？让事情更灵活很高兴

【参考方案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/