Question

我创建了一个带有表单的网站，该表单在页面中间水平对齐。但我不确定如何垂直居中。可能是CSS或HTML中的参数都是问题。我该怎么做才能完成这项工作？

我希望底层div之间的分离恰好出现在提到的文本字段和段落的中间。要做到这一点，我还需要增加它们之间的空间！我该怎么做？

它的外观如下：

CIApp.html

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id=gitForm>
  <div class="text-left">
    <form class="col-sm-10 form-group-lg">
      <div class="form-group">
        <div class="projectNameContainer">
          <label id="nameLabel" class="from-control-label" for="projectNameInput">Name your
                                project</label>
          <input type="text" class="form-control form-control-lg" id="projectNameInput">
        </div>
      </div>
      <div class="form-group">
        <div class="gitRepoContainer">
          <label id="gitLabel" class="from-control-label" for="repoInput">Enter you Git
                                repository</label>
          <input type="text" class="form-control form-control-lg" id="repoInput">
        </div>
      </div>
      <button class="btn btn-outline-success" id="submitRepo" onclick="storeRepo()" type="submit">
                        Submit
                    </button>
    </form>
  </div>
</div>

＆＃13;

CSS

#gitForm {
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 46.5%;
  margin-left: auto;
  padding-bottom: 0.5%;
  max-height: 20%;
  width: 25%;
  color: #333333;
  overflow: hidden;
  align-items: center;
  justify-content: space-around;
  display: flex;
  float: none;
}

Answer 1

看着你的形象我认为你在谈论水平居中。因此，假设您可以在此表单的div标记中提供类似class = "col-md-offset-4"的类，如。

<div class="form-group">
                <div class="col-md-offset-4 gitRepoContainer">
                    <label id="gitLabel" class="from-control-label" for="repoInput">Enter you Git
                        repository</label>
                    <input type="text" class="form-control form-control-lg" id="repoInput">
                </div>
            </div>

Answer 2

这是重复的（我不知道）。谢谢@Rob指出我正确的方向！

如何将div居中并更改表单中元素之间的空间？

2 个答案: