As a newbie to web development, I'm struggling with positioning my form at the center of the content. The form has a width of 930px and its height ranges between:
min-height: 450px;
max-height: 860px;
I have tried different methods but haven't been successful in achieving this. It might sound like a trivial question, but can someone please assist me with this?
Here is my HTML code:
<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;
}