Html CSS将文本垂直对齐在大复选框旁边的中间位置

我想有一个复选框，高2米，宽2米，旁边有一些额外的小括号：复选框同意这些条款

容器{ 身高：3公分 } 输入{ 高度：2米； 宽度：2米 } .法律{ 垂直对齐：中间对齐 } 复选框以同意这些条款 术语div应该有display:inline block；因为您希望使其与复选框一致。容器应具有线条高度而不是高度，因为垂直对齐仅适用于线条高度

---

有很多方法可以做到这一点-请参见下面的一些方法：

解决方案1：内联块

对输入元素和合法元素使用内联块，并将它们垂直对齐到中间：

容器{ 身高：3公分 } 输入{ 高度：2米； 宽度：2米； 显示：内联块； 垂直对齐：中间对齐； } .法律{ 显示：内联块； 垂直对齐：中间对齐； } 复选框以同意这些条款

---

寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的代码。你看，但我什么也没做。你希望看到我哪一次失败的尝试？？？？？？？我已经描述了我在代码方面所做的工作。这里要验证什么？

xxxxxxxxxxx
xxxxxxxxx∎x
xxxxxxx∎xxx
xxxxxx∎xxxx  (check box to agree to these terms)
x∎xx∎xxxxxx  
xxx∎xxxxxxx

#container {
  line-height: 3em;
  vertical-align: middle;
}
input {
  height: 2em;
  width: 2em;
  vertical-align: middle;
}
.legal {
  display:inline-block;
  width:auto;
}