如何将复选框和标签放在表格的中心

Question

如何将文本和带有标题“与上述相同的地址”的复选框居中对齐。我使用了引导程序并尝试将其居中，但没有任何帮助。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="hr-sect col-xs-12">Home Address</div>													
    <div class="form-group required">
    	<div class="col-xs-12 center-block" >
    	<div class="col-xs-4 col-xs-offset-4 checkbox">
    		<input type="checkbox" name="chkIsSameHomeAddress" id="chkIsSameHomeAddress"  class="AddressCheckBoxShowGroup checkbox" value="false">												
    	</div>
    		<label for="chkIsSameHomeAddress" class="control-label col-xs-4">Address same as above</label>		
    	</div>																													
    </div>

以下是我得到的输出，我需要将控件和标签居中。

Answer 1

直接将其剥离即可：

（边界，行高和字体大小只是为了夸大垂直对齐方式

.verticalMiddle {
  border: solid black 1px;
  font-size: 1.5em;
  line-height: 2em;
  vertical-align: middle;
}

<h1>Home Address</h1>
<div class="verticalMiddle">
  <input type="checkbox">
  <label >Address same as above</label>  
</div>

Answer 2

希望这可能对您有帮助

   .checkbox.form_div label{
        padding-left: 0;
    }
   .form_div input{
        display: inline-block;
        position: relative;
        vertical-align: top;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div class="hr-sect col-xs-12">Home Address</div>													
    <div class="form-group required col-xs-12">
        <div class="col-xs-4 col-xs-offset-4 checkbox form_div text-center">
            <input type="checkbox" name="chkIsSameHomeAddress" id="chkIsSameHomeAddress"  class="AddressCheckBoxShowGroup checkbox" value="false">												
            <label for="chkIsSameHomeAddress" class="control-label">Address same as above</label>	
        </div>
    </div>