title: Centering the checkbox in a line
body: <p>I would like to center the checkbox in a line with text next to it.                                    </p>
  
  <p>I've tried already <code>style="text-align: center;"</code> in <code>&lt;div&gt;</code> but it doesn't work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form class="form-box__form form"&gt;
    &lt;input type="e-mail" name="e-mail" id="e-mail" placeholder="e-mail" /&gt;
    &lt;input type="password" name="password" id="password" placeholder="password" /&gt;
    &lt;button&gt;Create account&lt;/button&gt;
    &lt;div style="text-align: center;"&gt;
      &lt;input type="checkbox" name="consent" id="consent" /&gt;
      &lt;label for="consent"&gt;I agree to whatever you want me to agree&lt;/label&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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?
  <a href="https://imgur.com/a/SugT2kk" rel="nofollow noreferrer">here</a></p>