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