css - 如何垂直对齐输入字段文本和复选框？

Question

我在同一行中有输入字段和复选框。我想在中间垂直对齐复选框。这是我所拥有的示例:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="form-row">
  <div class="form-group col-6">
    <label for="Addr">Address:</label>
    <input class="form-control" type="text" name="Addr" id="Addr" value="" placeholder="Enter Physical Address" maxlength="40">
  </div>
  <div class="form-group col-6">
    <div class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
      <label class="custom-control-label" for="sameAddress">check this box if mailing address is the same as physical address</label>
    </div>
  </div>
</div>

正如您在我的示例中看到的那样，复选框位于 div 容器的顶部。如何在中间垂直对齐复选框？

Answer 1

作为 Bootstrap 4 文档。在这里看到https://getbootstrap.com/docs/4.0/utilities/flex/ 你可以使用 class="d-flex align-items-center"。 我添加了 style="border: 1px solid black; height:200px;"进行演示。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="form-row d-flex align-items-center" style="border: 1px solid black; height:200px;">
  <div class="form-group col-6">
    <label for="Addr">Address:</label>
    <input class="form-control" type="text" name="Addr" id="Addr" value="" placeholder="Enter Physical Address" maxlength="40">
  </div>
  <div class="form-group col-6 ">
    <div class="custom-control custom-checkbox ">
      <input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
      <label class="custom-control-label" for="sameAddress">check this box if mailing address is the same as physical address</label>
    </div>
  </div>
</div>