html - 如何将这个表单的标签和输入居中？

Question

我是 HTML/CSS 新手，对我的 CodeCamp 项目有一些疑问

1. 如何将标签和输入移动到表单的中心？我试过在我的行类上使用 text-align: center 但它只分隔标签和输入。

2. 为什么复选框没有组合在一起？我已经尝试扩展底部边距，但它在标签应该位于的左列中带来了复选框。

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

这是给你的代码，首先是表格的整洁和清晰的对齐，你应该使用 bootstarp 编写代码。

把这个链接也用于工作代码亲爱的。

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

让你试试这个代码的工作。

Answer 2

看看这个答案，我在你的页面中添加了两种样式：

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

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

#survey-form用于使表单对齐到中心。

.div50就是将div划分为父div的50%。

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