Question

我对网络开发完全陌生。我有一个表单，我希望它在内容的中间。我的表单宽度为930px，其高度为

min-height: 450px;
max-height: 860px;

所以，我尝试了不同的方法，但我无法做到这一点。这可能是一个愚蠢的问题，但任何人都可以帮助我吗？

HTML是 -

    <div class="container" ng-show="showthejdData">
                    <div class="row">
                        <form class="form-horizontal jdformCorners">

                            <!--ngFor-->
                            <div class="form-group">
                                <label for="must" class="col-sm-2  ">MustRequirement</label>
                                <div class="col-xs-5">
                                    <input type="text" class="form-control setmargin" id="must" placeholder="must requirement">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="should" class="col-sm-2">ShouldRequirement</label>
                                <div class="col-xs-5">
                                    <input type="text" class="form-control setmargin" id="should" placeholder="should requirement">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="could" class="col-sm-2">CouldRequirement</label>
                                <div class="col-xs-5 setmargin">
                                    <input type="text" name="could" class="form-control setmargin" id="could" placeholder="could requirement"></textarea>
                                </div>
                            </div>
    </form></div></div>


CSS- 

        .jdformCorners {
          border-radius: 25px;
            border: 2px solid #dddddd;
            padding: 20px;
            width: 932px;
            min-height: 450px;
            max-height: 860px;
        }
    .setmargin {
      margin-left: 0px;
    }

Answer 1

你可以用这个：

#form1 {
    display: block;
    text-align: center;
    margin : 0 auto;
}

我还从.jdformCorners中删除了宽度以便响应这是一个jfiddle：

https://jsfiddle.net/f8ugLor9/5/

Answer 2

亲爱的朋友，亲爱的朋友，最好的办法是这样，因为这样你可以做到responsive：

.form{
  width:35%;/*or use what percantage do you want*/
  margin : 0 auto ;/*with this syntax you can centerlize your form*/
  display : block;/*this means this form must get full block*/
}

.innerform{
  display:block;
  margin : 5px;
}

<div class="form">
  <div class="innerform">
    <input />
  </div>
  <div class="innerform">
    <input />
  </div>
</div>

Answer 3

有许多方法可以使用css进行集中。一种简单的方法是对margin: 0 auto; = display（并且其宽度小于其父宽度）的项目使用block。

要将所有<div>元素置于<form>内，您可以为display: flex添加.jdformCorners：

display: flex;
flex-direction: column;
align-items: center;

在此处查看完整源代码： https://jsfiddle.net/d48tdsed/1/

另外，请访问此网站：http://howtocenterincss.com/

将表单与中心对齐使用宽度和高度

3 个答案: