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

-1

我创建了一个表单，它在页面中间水平对齐。但我不确定如何垂直居中。这可能是CSS或HTML中的参数是问题。我能做些什么来完成这件事？如何居中div并更改表单中元素之间的空间？

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

这是它的外观：

CIApp.html

<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>

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; 
}

来源

2017-10-18 josefdev

[如何垂直居中所有浏览器的div？]（https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers）和通过搜索发现其他几个人。 – Rob

你能提供html和css代码吗？ –

这个https://v4-alpha.getbootstrap.com/utilities/flexbox/有专门的课程，请使用它们。然后告诉我们它仍然失败的地方。绝对可能不需要...... –

看着你的形象，我认为你是在谈论水平居中。所以，假设你可以在这种形式的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>

来源

2017-10-18 12:29:31

bootstrap 4也有一个'justify-center'类来根据flex-direction对齐儿童;） –

这是一个重复的（我不知道）。感谢@Rob指引我朝着正确的方向发展！

来源

2017-10-18 14:00:57 josefdev

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

回答

相关问题