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

术语div应该有display:inline-block;，因为你想使它与复选框一致。容器应该有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/

Answer 2

有很多方法可以做到 - 请参阅以下部分内容：

解决方案1 ：内联块

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

＆＃13;

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

＆＃13;

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

＆＃13;

解决方案2 ：表格显示

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

＆＃13;

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

＆＃13;

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

＆＃13;

解决方案3 ： Flexbox

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: