How do I center the label and input of this form?

Question

I'm new to HTML/CSS and had some questions about my CodeCamp project

1. How do I move the label and input to the center of the form? I've tried using text-align: center on my row class but it only separates the label and input.

2. Why are the checkboxes not grouped together? I've tried expanding the bottom margin but it brings the checkboxes on the left column where the labels are supposed to be.

 html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Nunito', sans-serif; background-color: #ea8a8a; } #title { color: #685454; text-align: center; padding: 10px; } #description { color: #685454; text-align: center; padding: 10px; } #outer-form { border-radius: 10px; background-color: #ebd5d5; padding-bottom: 10px; } .row {} .label { color: #685454; display: inline-block; text-align: right; float: left; padding-top: 5px; width: 190px; margin-right: 20px; } #name { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px; } #email { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px } #number { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px } #dropdown { height: 30px; margin-top: 5px; margin-bottom: 14px; display: inline-block; vertical-align: middle; horizontal-align: bottom; margin-left: 20px; width: 120px } input[type=radio] { margin-left: 20px; margin-bottom: 30px; vertical-align: baseline; margin-top: 20px; } input[type=checkbox] { margin-left: 20px; vertical-align: baseline; } #comments { margin-top: 10px; margin-bottom: 5px; vertical-align: middle; margin-left: 20px; width: 150px; height: 50px; } #submit { background-color: #ea8a8a; color: white; border-radius: 5px; font-size: 14px; margin-top: 10px; margin-bottom: 20px; display: inline-block; vertical-align: middle; margin-left: 160px; width: 100px; height: 40px; } 

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700"> <h1 id="title">Doge Adoption Form</h1> <div id="outer-form"> <p id="description">Please fill out the questionare below</p> <form id="survey-form"> <div class="row"> <label class="label" id="name-label" for="name">Name: </label> <input id="name" placeholder="Enter your name" required> </input> </div> <div class="row"> <label class="label" id="email-label" for="email">Email: </label> <input id="email" type="email" placeholder="Enter your email" required> </input> </div> <div class="row"> <label class="label" id="number-label" for="age">Age: </label> <input id="number" min="18" max="99" type="number" placeholder="Age:" required> </input> </div> <div class="row"> <text class="label">What is your favorite dog: </text> <select id="dropdown"> <option value="Pomeranian"> Pomeranian</option> <option value="Beagle"> Beagle</option> <option value="German Shepard"> German Shepard</option> </select> </div> <div class="row"> <label class="label">How likely are you to pick up doge poop:</label> <input type="radio" name="odds" value="very likely"> Very Likely <input type="radio" name="odds" value="not likely"> Not Likely </div> <div class="row"> <label class="label"> What tricks will you teach (select all that apply)</label> <input type="checkbox" name="trick" value="Sit">Sit<br> <input type="checkbox" name="trick" value="Army crawl">Army crawl<br> <input type="checkbox" name="trick" value="Roll over">Roll over<br> <input type="checkbox" name="trick" value="Speak">Speak<br> </div> <div class="row"> <label class="label">Any additional information?</label> <textarea id="comments" placeholder="Enter your comment here..."></textarea> </div> <div class="row"> <input id="submit" type="submit" value="Submit"> </div> </form> </div> 

Answer 1

here is the code for u first of all a neat and clear alignment of a form you should write the code using bootstarp.

put this links also for working the code dear.

 <!doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Signingroup Financial</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" type="text/css">
<link rel='stylesheet' href='http://fonts.googleapis.com/icon?family=Material+Icons' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet" type="text/css">

    <div class="row">
        <div class="sg_formslist">
            <div class="col-sm-12 col-md-12">

             <div id="Selection-1-container" >
                <form  class="form-horizontal" id="form1">
                    <div class="col-sm-12 ">
                        <div class="col-sm-2">
                        </div>
                            <div class="col-sm-6">

                            <div class="form-group">
                                <div class="col-sm-12">
                                    <label class="control-label col-sm-6">Surname<span class="impstar">*</span></label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="customer_name" Placeholder="Customer Name"  required>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-12">
                                    <label class="control-label col-sm-6">Mobile Number 1<span class="impstar">*</span></label>
                                    <div class="col-sm-6">
                                        <input type="tel" name="mob_num1" class="form-control" size="10" maxlength="10" Placeholder="+91 - 83445839284" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <label class="control-label col-sm-6">Mobile Number 2<span class="impstar">*</span></label>
                                    <div class="col-sm-6">
                                        <input type="tel" name="mob_num1" class="form-control" size="10" maxlength="10" Placeholder="+91 - 83445839284 ">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="col-sm-12">
                                    <label class="control-label col-sm-6">Gender<span class="impstar">*</span></label>
                                    <div class="col-sm-6">
                                        <div class="radio"  required>
                                          <label >
                                            <input type="radio" name="Selection" id="Selection-1" value="female" checked>
                                            Female
                                          </label>

                                          <label >
                                            <input type="radio" name="Selection" id="Selection-1" value="male" >
                                            Male
                                          </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                          <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label col-sm-6">Description <span class="impstar">*</span></label>
                                <div class="col-sm-6">
                                    <textarea class="form-control" rows="3" name="description" placeholder="Description For Discount"></textarea>
                                </div>
                            </div>
                          </div>

                            <div class="form-group text-right">
                                <i class="fa fa-paper-plane plnay" ></i>
                                <input type="submit" class="btn btn-info" value="Submit ">
                            </div>
                        </div>
                        <div class="col-sm-3">
                        </div>
                    </div>
                    </div>
                </form>
                </div>

            </div>
        </div>

</div>

let you try this code its working.

Answer 2

Look at this answer, I have added two styles in your page:

#survey-form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.div50 {
  float: left;
  width: 50%;
}

#survey-form for make the form alignment into center.

.div50 is to divide div as 50% of the parent div.

 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Nunito', sans-serif; background-color: #ea8a8a; } #title { color: #685454; text-align: center; padding: 10px; } #description { color: #685454; text-align: center; padding: 10px; } #outer-form { border-radius: 10px; background-color: #ebd5d5; padding-bottom: 10px; } .row {} .label { color: #685454; display: inline-block; text-align: right; float: left; padding-top: 5px; width: 190px; margin-right: 20px; } #name { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px; } #email { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px } #number { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px } #dropdown { height: 30px; margin-top: 5px; margin-bottom: 14px; display: inline-block; vertical-align: middle; horizontal-align: bottom; margin-left: 20px; width: 120px } input[type=radio] { margin-left: 30px; margin-bottom: 15px; vertical-align: baseline; margin-top: 10px; } input[type=checkbox] { margin-left: 30px; vertical-align: baseline; } #comments { margin-top: 10px; margin-bottom: 5px; vertical-align: middle; margin-left: 20px; width: 150px; height: 50px; } #submit { background-color: #ea8a8a; color: white; border-radius: 5px; font-size: 14px; margin-top: 10px; margin-bottom: 20px; display: inline-block; vertical-align: middle; margin-left: 160px; width: 100px; height: 40px; } #survey-form { width: 100%; max-width: 400px; margin: 0 auto; } .div50 { float: left; width: 50%; } 

 <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700"> <h1 id="title">Doge Adoption Form</h1> <div id="outer-form"> <p id="description">Please fill out the questionare below</p> <form id="survey-form"> <div class="row"> <label class="label" id="name-label" for="name">Name: </label> <input id="name" placeholder="Enter your name" required> </div> <div class="row"> <label class="label" id="email-label" for="email">Email: </label> <input id="email" type="email" placeholder="Enter your email" required> </div> <div class="row"> <label class="label" id="number-label" for="age">Age: </label> <input id="number" min="18" max="99" type="number" placeholder="Age:" required> </div> <div class="row"> <text class="label">What is your favorite dog: </text> <select id="dropdown"> <option value="Pomeranian"> Pomeranian</option> <option value="Beagle"> Beagle</option> <option value="German Shepard"> German Shepard</option> </select> </div> <div class="row"> <div class="div50"><label class="label">How likely are you to pick up doge poop:</label></div> <div class="div50"> <input type="radio" name="odds" value="very likely"> <label>Very Likely</label><br> <input type="radio" name="odds" value="not likely"> <label>Not Likely</label> </div> </div> <div class="row"> <div class="div50"> <label class="label"> What tricks will you teach (select all that apply)</label> </div> <div class="div50"> <input type="checkbox" name="trick" value="Sit">Sit<br> <input type="checkbox" name="trick" value="Army crawl">Army crawl<br> <input type="checkbox" name="trick" value="Roll over">Roll over<br> <input type="checkbox" name="trick" value="Speak">Speak<br> </div> </div> <div class="row"> <label class="label">Any additional information?</label> <textarea id="comments" placeholder="Enter your comment here..."></textarea> </div> <div class="row"> <input id="submit" type="submit" value="Submit"> </div> </form> </div>