Centering the checkbox in a line [duplicate] - html

Question

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 3 years ago.
I would like to center the checkbox in a line with text next to it.
I've tried already style="text-align: center;" in <div> but it doesn't work.
input {
font-size: 16px;
}
label {
font-size: 11px;
vertical-align: middle;
}
form {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
input[type="checkbox"] {
width: 15px;
height: 15px;
-webkit-appearance: none;
background: white;
outline: none;
border: none;
border-radius: 50%;
transition: .5s;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2)
}
input:checked[type="checkbox"] {
background-color: transparent;
}
<form class="form-box__form form">
<input type="e-mail" name="e-mail" id="e-mail" placeholder="e-mail" />
<input type="password" name="password" id="password" placeholder="password" />
<button>Create account</button>
<div style="text-align: center;">
<input type="checkbox" name="consent" id="consent" />
<label for="consent">I agree to whatever you want me to agree</label>
</div>
</form>
At the moment it looks like this in the attached picture. So can someone please guide me on how to center the checkbox in a line?
here

Answer 1

Please add below line only your css class, not need to change in html you written:
vertical-align: middle;
position: relative;
bottom: 1px;
input {
font-size: 16px;
}
label {
font-size: 11px;
vertical-align: middle;
}
form {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
input[type="checkbox"] {
width: 15px;
height: 15px;
-webkit-appearance: none;
background: white;
outline: none;
border: none;
border-radius: 50%;
transition: .5s;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
vertical-align: middle;
position: relative;
bottom: 1px;
}
input:checked[type="checkbox"] {
background-color: transparent;
}
<form class="form-box__form form">
<input type="e-mail" name="e-mail" id="e-mail" placeholder="e-mail"/>
<input type="password" name="password" id="password" placeholder="password"/>
<button>Create account</button>
<div style="text-align: center;">
<input type="checkbox" name="consent" id="consent"/>
<label for="consent">I agree to whatever you want me to agree</label>
</div>
</form>

Answer 2

Just put the checkbox in the tag and use
display: flex;
align-items: center;
on the label
input {
font-size: 16px;
}
label {
font-size: 11px;
vertical-align: middle;
}
form {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
input[type="checkbox"] {
width: 15px;
height: 15px;
-webkit-appearance: none;
background: white;
outline: none;
border: none;
border-radius: 50%;
transition: .5s;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2)
}
input:checked[type="checkbox"] {
background-color: transparent;
}
label {
display: flex;
align-items: center;
}
<form class="form-box__form form">
<input type="e-mail" name="e-mail" id="e-mail" placeholder="e-mail" />
<input type="password" name="password" id="password" placeholder="password" />
<button>Create account</button>
<div>
<label for="consent"><input type="checkbox" name="consent" id="consent" />I agree to whatever you want me to agree</label>
</div>
</form>

Answer 3

Use align-items property.
div { display: flex; align-items: center; } //immediate parent of checkbox and label

Answer 4

For parent div of input add the below style property
.div{
Display:inline-flex;
}
Or you can add the below code
<label for="input" ><input type="checkbox" name="input" /></label>

Answer 5

Try position:relative and bottom:**px as per your need
input {
font-size: 16px;
}
label {
font-size: 11px;
vertical-align: middle;
}
form {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
input[type="checkbox"] {
width:15px;
height: 15px;
-webkit-appearance: none;
background: white;
outline: none;
border: none;
border-radius: 50%;
transition: .5s;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
margin:0;
bottom:-3.5px;
position:relative
}
input:checked[type="checkbox"] {
background-color: transparent;
}
<form class="form-box__form form">
<input type="e-mail" name="e-mail" id="e-mail" placeholder="e-mail"/>
<input type="password" name="password" id="password" placeholder="password"/>
<button>Create account</button>
<div style="text-align: center;display:inline;">
<input type="checkbox" name="consent" id="consent" >
<label for="consent" > I agree to whatever you want me to agree</label>
</div>
</form>