How to keep the text behind the check box in html aligned with the check box? The text is always lower than the check box.

  html5, question

图片描述

I want the text behind this to be vertically centered with the check box

Example

UseFlexboxTo deal with this kind of problem is the most convenient:

* {
 margin: 0;
 padding: 0;
 border: none;
 }
 
 body {
 background-color: darkgray;
 }
 
 .main {
 width: 800px;
 margin: 100px auto;
 }
 
 form {
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100px;
 background-color: whitesmoke;
 border: 2px solid grey;
 margin: 20px auto;
 }
 
 p {
 font-size: 20px;
 Font-family: "microsoft yahei";
 }
 
 .input {
 display: flex;
 align-items: center;
 flex: 1;
 padding: 10px;
 }
 
 .input > input {
 margin: 10px;
 }
 
 .input > label {
 font-size: 20px;
 }