Question

在<li>内，该复选框默认情况下完全位于中间，但该复选框后的文本始终坚持到底部。如何使<li>中的文本与中间的复选框垂直且完美对齐？

我已经尝试过vertical-align: middle，但文字也位于底部。

div.CheckBoxList_1 {
  font-size: 8px;
  background: #FFFFFF;
  width: 90%;
  margin-left: 4px;
  padding-left: 0px;
  display: none;
  border: 1px solid #cccccc;
}

div.CheckBoxList_1 ul {
  width: 100%;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  border: 0px solid black;
}

div.CheckBoxList_1 ul li {
  border: 1px solid blue;
  vertical-align: middle;
}

<div class="CheckBoxList_1">
  <ul>
    <li><input type="checkbox" name="CheckBoxArray[]" value="TEXT_1" checked />TEXT_1</li>
    <li><input type="checkbox" name="CheckBoxArray[]" value="TEXT_2" checked />TEXT_2</li>
    <li><input type="checkbox" name="CheckBoxArray[]" value="TEXT_3" checked />TEXT_3</li>
    <li><input type="checkbox" name="CheckBoxArray[]" value="TEXT_4" checked />TEXT_4</li>
    <li><input type="checkbox" name="CheckBoxArray[]" value="TEXT_5" checked />TEXT_5</li>
  </ul>
</div>

Answer 1

问题出在input，而不是li。

在vertical-align: middle;上设置<input>。

div.CheckBoxList_1 {
  font-size: 8px;
  background: #FFFFFF;
  width: 90%;
  margin-left: 4px;
  padding-left: 0px;
  border: 1px solid #cccccc;
}

div.CheckBoxList_1 ul {
  width: 100%;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  border: 0px solid black;
}

div.CheckBoxList_1 ul li {
  border: 1px solid blue;
}

div.CheckBoxList_1 ul li input {
  vertical-align: middle;
}

<div class="CheckBoxList_1">
  <ul>
    <li><input type="checkbox" />TEXT_1</li>
    <li><input type="checkbox" />TEXT_2</li>
    <li><input type="checkbox" />TEXT_3</li>
    <li><input type="checkbox" />TEXT_4</li>
    <li><input type="checkbox" />TEXT_5</li>
  </ul>
</div>

Answer 2

只需在display: flex; CSS中添加align-items: center;和div.CheckBoxList_1 ul li。解决您的问题。试试这个，希望对您有所帮助。谢谢

div.CheckBoxList_1 ul li {
    border: 1px solid blue;
    vertical-align: super;
    display: flex;
    align-items: center;
}

div.CheckBoxList_1 {
  font-size: 8px;
  background: #FFFFFF;
  width: 90%;
  margin-left: 4px;
  padding-left: 0px;
  border: 1px solid #cccccc;
}

div.CheckBoxList_1 ul {
  width: 100%;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  border: 0px solid black;
}

div.CheckBoxList_1 ul li {
  border: 1px solid blue;
  vertical-align: middle;
  display: flex;
  align-items: center;
}

<div class="CheckBoxList_1">
  <ul>
    <li><input type="checkbox" name="CheckBoxArray[]" value="TEXT_1" checked />TEXT_1</li>
    <li><input type="checkbox" name="CheckBoxArray[]" value="TEXT_2" checked />TEXT_2</li>
    <li><input type="checkbox" name="CheckBoxArray[]" value="TEXT_3" checked />TEXT_3</li>
    <li><input type="checkbox" name="CheckBoxArray[]" value="TEXT_4" checked />TEXT_4</li>
    <li><input type="checkbox" name="CheckBoxArray[]" value="TEXT_5" checked />TEXT_5</li>
  </ul>
</div>

Answer 3

将CSS替换为我的CSS

div.CheckBoxList_1 {
  font-size: 8px;
  background: #FFFFFF;
  width: 90%;
  margin-left: 4px;
  padding-left: 0px;
  /*display: none;*/
}

div.CheckBoxList_1 ul {
  width: 100%;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  border: 0px solid black;
}

div.CheckBoxList_1 ul li {
     border: 1px solid #0000ff4a;
    height: 25px;
    margin: 4px 0px;
    line-height: 25px;
}

Answer 4

首先，您需要更好地了解如何使用vertical-align。仅当在表格单元格或具有属性display: table-cell;的另一个元素中使用时，它才会垂直对齐文本。在其他用途中，它指定文本应如何在元素周围对齐。因此，在您的情况下，您需要将vertical-align: middle;添加到输入而不是列表项中。

此外，还需要将列表项的line-height设置为等于高度，这样可以更好地使文本垂直居中。

See this jfiddle

ul文字与复选框的垂直排列不完美

4 个答案: