Typescript 和 CSS：将 label 与复选框对齐

Question

I am working on a project where there is a checkbox and a label, and they need to be aligned on the same line, with the text vertically aligned center to the checkbox. But the text comes slightly below the checkbox.

import React from "react";

import './checkbox.less';

interface ICheckBoxProps {
  label: string;
}

const Checkbox:React.FC<ICheckBoxProps> = ({label}) => (
    <div className="flex">
      <div>
        <input
          type="checkbox"
          id={label}
          className = "container"
        />     
        <label htmlFor={label} className="label">{label}</label> 
      </div>
    </div>
  )
export default Checkbox;

The CSS File:

.App {
    font-family: sans-serif;
    text-align: center;
    position:relative;
    display: inline;
  }


.container {
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
    vertical-align:middle;
    display:inline-block;
    }

  
.flex{
display: flex;
align-items: center;
justify-content: flex-start;
vertical-align:middle;
display: inline-flex;
}

.label{
    display : inline;
}

Please help

Answer 1

This is because you apply a margin-bottom: 12px; on your <input type="checkbox"/> element (through .container class):

        <input
          type="checkbox"
          id={label}
          className = "container"
        />   

.container {
    margin-bottom: 12px;

You can simply not apply this margin on the <input> only (see label1 in below screenshot), or apply it on the containing div (that wraps both the <input> and the <label> , see label2 in below screenshot):

  <div className="flex">
    <div class="container2">
      <input type="checkbox" id="label2" class="container1" />
      <label for="label2" class="label">{label2 margin-bottom on containing div (both input and label)}</label>
    </div>
  </div>

.container1 {
  /*margin-bottom: 12px;*/
}

.container2 {
  margin-bottom: 12px;
}

Demo: https://jsfiddle.net/sabr7xw0/2/