复选框在div标签内未对齐

Question

早上好，无论如何，我的复选框和需要在其旁边的文本不在同一行中对齐。我在JS Fiddle上有代码。 https://jsfiddle.net/6ejwdg9v/

复选框代码为：

<div class="form-group">
 <div class="checkbox">
   <label>
     <input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
   </label>
 </div>
</div>

自定义的CSS代码没有触及class-group和checkbox，这就是为什么我想知道它们如何受到影响。

编辑：我在“另一个问题的重复项”中添加了代码，但它没有做任何我仍然需要帮助的事情

Answer 1

更改了.checkbox的班级

vertical-align: middle;
width: 20px;

还添加了

input[type=checkbox] {
      width: 20px;
    }

@font-face {
  font-family: 'brandon_reg';
  src: url('../fonts/brandon-grotesque-light.otf');
}

@font-face {
  font-family: 'brandon_med';
  src: url('../fonts/brandon-grotesque-medium.otf');
}

@font-face {
  font-family: 'brandon_black';
  src: url('../fonts/brandon-grotesque-black.otf');
}

html {
  font-size: 100%;
}

body {
  margin: 0 auto;
  display: block;
/*REGISTER BACKGROUND*/
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
/*REGISTER BACKGROUND*/
}

.regular_bg {
  font-family: 'brandon_reg';
}

.med_bg {
  font-family: 'brandon_med';
}

.sml_padding {
  margin: -10;
  padding: -10;
}

.thick_bg {
  font-family:  'brandon_black';
}

.thick_bg2 {
  font-size: 35px;
}

@media only screen and (max-width : 767px) {
  .box {
    height: auto !important;
  }
}

.fadeIn {
        -webkit-animation: animat_show 0.8s;
        animation: animat_show 0.8s;
        visibility: visible !important;
    }

    @-webkit-keyframes animat_show{
        0%{opacity:0}
        100%{opacity:1}
    }

    .btn-group-sm>.btn, .btn-sm {
        float: none;
    }
    .navbar-toggle {
        display: inline-block;
        float: none;
    }

.full_width {
  height: auto;
  width:100%;
}

.ul_login {
  color: #00a6a6;
}

.ul_reg {
  color: #f08300;
}

.justify_text {
  transform: translateT(-50);
  text-align: justify;
  padding: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*
.row_center {
  display: flex;
}

.row_center>* {
  flex: 1;
}
*/

.center-block {
   margin-left:auto;
   margin-right:auto;
   display:block;
}

.icon_text_padding {
  padding-bottom: 20px;
  align-items: center;
  margin: 0 auto;
}

.fab {
  padding: 20px;
  font-size: 50px;
  color: #FFF;
}

.fab:hover {
  color: #c9c9c9;
  text-decoration: none;
}

/*IMPORTANT CSS FOR HEADER*/
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  padding: 10px 100px;
  box-sizing: border-box;
  transition: .5s;
}

.list1 {
  float: left;
  font-size: 200%;
}

.list2 {
  float: right;
  font-size: 200%;
}

.list2 li a:hover {
  color: #fff;
}

/*
.lines {
  position: relative;
  padding: 10px 0;
}

.lines:before {
  content: '';
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  top: 0;
  left: 0;
  width: 32%;
  height: 1px;
  background: #cfcfcf;
}

.lines:after {
  content: '';
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  bottom: 0;
  left: 0;
  width: 32%;
  height: 1px;
  background: #cfcfcf;
}

.lines_med:before {
    width: 24%;
}

.lines_med:after {
    width: 24%;
}

.lines_med2:before {
    width: 27%;
}

.lines_med2:after {
    width: 27%;
}


.lines_long:before {
    width: 38%;
}

.lines_long:after {
    width: 38%;
}
*/
nav .logo {
  float: left;
}

nav .logo img {
  height: 80px;
  transition: 5s;
}

nav ul {
  float: left;
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  line-height: 80px;
  color: #262626;
  padding: 5px 20px;
  text-decoration: none;
  transition: .5s;
}

nav ul li a:hover {
  color: #fff;
  background: #00a6a6;
  text-decoration: none;
}

footer {
  width: 100%;
  background-color: #00a6a6;
  padding: 3%;
  color: #FFF;
}

.carousel-control.left, .carousel-control.right {
   background-image:none !important;
   filter:none !important;
}

.container-fluid {
  max-width: 1200px;
  
}

footer .container-fluid {
  max-width: 100%;
}

.footer_links a h4 {
  color: #fff;
}

.footer_links a:hover {
  color: #fff;
  text-decoration: underline;
}

.faq a:hover {
  text-decoration: none !important;
}

.info_container {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}

.info_box h2 {
  text-align: center;
}

.info_header {
  padding-top: 4%;
  padding-bottom: 4%;
}

.bottom_padding {
  padding-bottom: 4%;
}

.info_font {
  font-size: 18px;
}

.mv_font {
  font-size: 20px;
  text-align: left;
}

.contact_font {
  font-size: 20px;
  text-align: center;
}

.center_font {
  margin: 0 auto;
  text-align: center;
}

#icon {
  max-width: 90%;
}

@media (max-width: 600px){
    #icon {
      max-width: 150px;
    }
    h4 {
      font-size: 1.7em;
    }
}

/*CONTACT PAGE*/

.text_field_design {
  padding: 50px 0 80px;
  text-align: center;
}

.text_field_design p {
  padding-bottom: 80px;
  color: #737373;
}

.text_field_design h2 {
  color: #4c4c4c;
  margin: 20px 0 20px;
}

.text_field_design .input-group {
  margin-bottom: 25px;
}

.input-group-addon {
  padding: -50px !important;
  font-size: 20px;
}

.text_field_design .form-control {
  border-radius: 0 !important;
}

.text_field_design span {
  border-radius: 0 !important;
}

.text_field_design .btn {
  border-radius: 0;
  width: 100%;
  font-size: 15px;
  background-color: #f08300;
  color: #fff;
}

.text_field_design .btn:hover {
  background-color: #f3a64c;
  color: #fff !important;
}

.box_shadow {
  box-shadow: 10px 10px 5px grey;
}

.curved_img {
  border-radius: 10px;
}

/*REGISTER*/
.reg_box {
  width: 90%;
  padding: 70px 70px 10px;
  background: #fff;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  opacity: 0.9;
  border-radius: 30px;
}

.reg_box p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.reg_box input {
  width: 100%;
  margin-bottom: 20px;
}

.reg_box input[type="text"], input[type="password"] {
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none;
  height: 40px;
}

.reg_box input[class="reg_signup"] {
  font-family: 'brandon_med';
  border: none;
  outline: none;
  height: 40px;
  background: #f08300;
  color: #fff;
  font-size: 18px;
  margin-top: 20px;
}

.reg_box input[class="reg_fb"] {
  font-family: 'brandon_med';
  border: none;
  outline: none;
  height: 40px;
  background: #3b579d;
  color: #fff;
  font-size: 18px;
}

.reg_box input[class="reg_google"] {
  font-family: 'brandon_med';
  border: none;
  outline: none;
  height: 40px;
  background: #2eaa52;
  color: #fff;
  font-size: 18px;
}

.checkbox {
    float: left !important;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
        width: 100%;
        vertical-align:middle;
}

/*
.register_form {
  text-align: center;
  margin: 100px 400px;
}

.registration {
  width: 100%;
  background-color: #fff;
  opacity: 0.9;
  padding: 50px 0px;
}

.align_left_reg {
  text-align: left;
  font-size: 18px;
}

#text_field {
  width: 250px;
  border-radius: 5px;
  padding: 5px;
}

#phone {
  width: 250px;
  padding: 5px;
  border-radius: 5px;
  outline: 0px;
}

#rd {
  font-family: 'brandon_med';
}

.button_container {
  max-width: 60%;
}

.ref_button {
  width: 100px;
  height: 40px;
  font-size: 18px;
  background-color: #f08300;
  color: #fff;
}

.fb_button {
  width: 200px;
  height: 40px;
  font-size: 18px;
  background-color: #3b579d;
  color: #fff;
}

.fb_button:hover {
  background-color: #3662d0;
}

.ref_button:hover {
  background-color: #f3a64c;
  color: #fff !important;
}

element.style {
  color: white;
}
REGISTER*/



input[type=checkbox] {
  width: 20px;
}

<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My White Card</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>

  <body style="background-color:#000;" class="regular_bg">
    <br><br>
    <div class="reg_box">
      <div class="row">
        <div class="col-md-6">
          <input type="submit" value="Sign Up With Facebook" class="reg_fb"></i>
        </div>
        <div class="col-md-6">
          <input type="submit" value="Sign Up With Google" class="reg_google"></i>
        </div>
      </div>
      <br>
      <form>
        <div class="row">
          <div class="col-md-6 col-sm-12">
            <p>First Name</p>
            <input type="text" placeholder="First Name">
            <p>Email</p>
            <input type="text" placeholder="Email">
            <p>Password</p>
            <input type="password" placeholder="Password">
          </div>
          <div class="col-md-6 col-sm-12">
            <p>Last Name</p>
            <input type="text" placeholder="Last Name">
            <p>Number</p>
            <input type="text" placeholder="Number">
            <p>Retype Password</p>
            <input type="password" placeholder="Retype Password">
          </div>
          </div>

          <div class="form-group">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
              </label>
            </div>
          </div>

          <input type="submit" value="Sign Up" class="reg_signup">
        </div>
      </form>
    </div>
  </body>
</html>

Answer 2

将标签变成flexbox将使您垂直对齐。

.checkbox label {
  display: flex;
  align-items: center; /* Vertical alignment */
}

<div class="form-group">
  <div class="checkbox">
    <label>
     <input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
   </label>
  </div>
</div>