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

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 2

您可以将其包装在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 3

更改此

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

作为Bootstrap 4文档。在这里看到https://getbootstrap.com/docs/4.0/utilities/flex/ 您可以使用class =“ d-flex align-items-center”。我添加了style =“ border：1px纯黑色； 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 5

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

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

5 个答案: