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

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>

Answer 2

display: flex 通常是一种对齐元素的简单方法。
在你的 CSS 中它会是这样的：

div.form-row {
  display: flex;
  align-items: center;
}

/* I overwrote the bottom margins that were messing with my alignment */
div.form-group.col-6 {
  margin-bottom: 0;
}

Answer 3

您可以将它包装在一个 div 类中，然后设置您希望它与输入框完美对齐的边距。

您只需将以下内容添加到您的 css 中，然后将您的自定义控件元素包装在一个以 css 类为中心的 div 中

这是一个实时示例https://jsfiddle.net/qpwsmoh8/ 和代码

css

.centered {
    margin-top:38px;
}

html

<div class="centered">
    <div class="custom-control custom-checkbox">
    ...
    </div>
</div>

Answer 4

改变这个

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

到这个sn-p -

<div class="custom-control custom-checkbox" style="
                    display: flex;
                    justify-items: center;
                    align-items: center;
                ">
                    <label class="custom-control-label" style="
                    float: left;
                "></label>
                      <input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
                      <label class="" for="sameAddress">check this box if mailing address is the same as physical address</label>
                    </div>

Answer 5

尝试在 css 中为您的输入标签或相应的类名添加它

input {
vertical-align: bottom;
position: relative;
}