Can I adjust the vertical position of checkboxes in HTML text? - html

Question

I'm creating a website with Bootstrap 4, and at least in Chrome on Windows 10, the checkboxes are shown a bit too high in a line:
These are <input type="checkbox"> elements enclosed in <label>s.
I would like to move the checkbox itself down by 3px or so. Is this possible with CSS?

Answer 1

Using a flexbox is an option.
.container {
display: flex;
align-items: center;
}
.row {
display: flex;
justify-content: space-between;
width: 100%;
}
<div class="main">
<div class="row">
<div class="container">
<label for="checkbox1">Checkbox 1</label>
<input type="checkbox" name="checkbox1">
</div>
<div class="container">
<label for="checkbox2">Checkbox 2</label>
<input type="checkbox" name="checkbox2">
</div>
<div class="container">
<label for="checkbox3">Checkbox 3</label>
<input type="checkbox" name="checkbox3">
</div>
<div class="container">
<label for="checkbox4">Checkbox 4</label>
<input type="checkbox" name="checkbox4">
</div>
</div>
<div class="row">
<div class="container">
<label for="checkbox5">Checkbox 5</label>
<input type="checkbox" name="checkbox5">
</div>
<div class="container">
<label for="checkbox6">Checkbox 6</label>
<input type="checkbox" name="checkbox6">
</div>
<div class="container">
<label for="checkbox7">Checkbox 7</label>
<input type="checkbox" name="checkbox7">
</div>
<div class="container">
<label for="checkbox8">Checkbox 8</label>
<input type="checkbox" name="checkbox8">
</div>
</div>
</div>

Answer 2

Try using vertical-align: middle;
input[type="checkbox"] {
vertical-align: middle;
}
<div class="test">
text <input type="checkbox" name="">
</div>