CSS用于在大型复选框旁边的中间位置垂直对齐文本

Question

我希望有一个2em高的复选框，2em宽，旁边有一些括号中的小文本：(check box to agree to these terms)

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

#container {
  height: 3em
}
input {
  height: 2em;
  width: 2em
}
.legal {
  vertical-align: middle
}

<div id="container">
  <input type="checkbox">
  <div class="legal">(check box to agree to these terms)</div>
  <div>

我没有成功通过将文本封装在容器div中，设置其高度以及在文本上使用vertical-align: middle来使文本垂直移动。

Answer 1

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

解决方案1：内联块

将inline-block用于input和legal元素，并将它们垂直对齐到中间：

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

<div id="container">
  <input type="checkbox">
  <div class="legal">(check box to agree to these terms)</div>
  <div>

解决方案2：表格显示

使用table作为容器，使用table-cell作为input和legal元素：

#container {
  height: 3em;
  display: table;
}
input {
  height: 2em;
  width: 2em;
  display: table-cell;
  vertical-align: middle;
}
.legal {
  display: table-cell;
}

<div id="container">
  <input type="checkbox">
  <div class="legal">(check box to agree to these terms)</div>
  <div>

解决方案3：Flexbox

只需使用flex作为容器，并使用align-items: center垂直居中：

#container {
  height: 3em;
  display: flex;
align-items: center;
}
input {
  height: 2em;
  width: 2em;
}
.legal {
}

<div id="container">
  <input type="checkbox">
  <div class="legal">(check box to agree to these terms)</div>
  <div>

Answer 2

术语div应该有display:inline-block;since，因为你想使它与复选框一致。容器应该有一个line-height而不是height因为vertical-align只与line-height一起使用

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

https://jsfiddle.net/2twhpyy9/2/