Question

我正在使用bootstrap 4来开发响应式网站。我在垂直对齐方面遇到了问题。

正如您在图像上看到的那样，中间的div不会垂直居中在屏幕上。我该怎么做？
标题未正确对齐，我希望它完全位于网站顶部和提到的div之间的中间位置。有没有一种简单的方法可以做到这一点，所以即使在较小的屏幕上看起来也不错？

这是它在手机上的外观： Website on mobile

HTML代码 jsfiddle so you get all details!

.navbar {
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  font-family: "Abril Fatface";
  font-size: 20px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

#headLine {
  font-family: "Abril Fatface";
  background-color: rgba(0, 0, 0, 0.8);
  display: inline-block;
  padding: 1%;
  color: #ffffff;
  border-radius: 25px;
}

#nameLabel,
#gitLabel {
  color: #ffffff;
}

.card {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 25px;
}

<div id="frontPage">
  <div class="container-fluid d-flex ">
    <div class="row"></div>
    <div class="col-6 .col-md-6">
      <h1 id="headLine">Let us exam your Git repositories</h1>
    </div>
  </div>
</div>

<div id="gitForm">
  <div class="container h-100 d-flex align-items-center justify-content-center">
    <div class="col-md-6">
      <div class=card>
        <div class="card-block">
          <form>
            <div class="form-group">
              <label id="nameLabel" for="projectNameInput">Name your
                                project</label>
              <input type="text" class="form-control" id="projectNameInput" placeholder="A project name you can live with">
            </div>

            <div class="form-group">
              <label id="gitLabel" for="repoInput">Enter your Git
                                repository</label>
              <input type="text" class="form-control" id=repoInput placeholder="A valid Gitrepo...">
            </div>
            <button class="btn btn-outline-success" id="submitRepo" onclick="storeRepo()" type="submit">
                              Submit
                          </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

在响应式网站上垂直对齐项目

0 个答案: