Centering the checkbox in a line

Question

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

Nico Bleiler · Answer 1 · 2019-07-24T08:54:41.120

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>

score 2 · Answer 2 · answered Jul 24 '19 at 08:42

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>

Rajesh · Answer 3 · 2019-07-24T08:44:44.587

1

Use align-items property.

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

edited Jul 24 '19 at 08:44

answered Jul 24 '19 at 08:39

Rajesh

123
2
3
14

I've already used that – mkre7 Jul 24 '19 at 08:41
I have revised my answer, give `display: flex` property to immediate parent of checkbox and label. – Rajesh Jul 24 '19 at 08:46

ajaykumar mp · Answer 4 · 2019-07-24T09:09:00.500

1

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>

edited Jul 24 '19 at 09:09

answered Jul 24 '19 at 09:03

ajaykumar mp

487
5
12

score 0 · Accepted Answer · answered Jul 24 '19 at 08:45

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>

@mkre7 Glad that I coud help you.Please upvote and accept my answer if you feel that as helpful. Happy coding :) — Sai Manoj, Jul 24 '19 at 08:51

Centering the checkbox in a line

5 Answers5