How to align vertically input field text and checkbox? - css

Question

I have input field and checkbox in the same row. I would like to vertically align checkbox in the middle. Here is example of what I have:
<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>
As you can see in my example checkbox is on the top of the div container. How to align check box vertically in the middle?

Answer 1

As Bootstrap 4 documentation. Seen here https://getbootstrap.com/docs/4.0/utilities/flex/
you can use class="d-flex align-items-center".
I added style="border: 1px solid black; height:200px;" to demonstrate.
<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 is often an easy way to align elements.
In your CSS it would be like this :
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

You could wrap it in a div class and just set the margin how you want it to align it perfectly with your input box.
You would just add the below to your css and then wrap your custom-control element in a div with css class centered
Here's a live example https://jsfiddle.net/qpwsmoh8/
and the code
css
.centered {
margin-top:38px;
}
html
<div class="centered">
<div class="custom-control custom-checkbox">
...
</div>
</div>

Answer 4

Change this
<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>
To this snippet -
<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

try adding this in the css for your input tag or the corresponding classname
input {
vertical-align: bottom;
position: relative;
}