垂直对齐复选框

Posted 2023-03-05

技术标签:

【中文标题】垂直对齐复选框【英文标题】：Vertically aligning a checkbox 【发布时间】：2012-04-06 14:29:41 【问题描述】：

我查看了有关此问题的不同问题，但由于我的标记限制，找不到任何可行的方法。

我的标记看起来像这样（不幸的是，这是由某些后端生成的，我无法更改标记）。

<ul>        
    <li>
        <input type="checkbox" value="1" name="test[]" id="myid1">
        <label for="myid1">label1</label>
    </li>
    <li>
        <input type="checkbox" value="2" name="test[]" id="myid2">
        <label for="myid2">label1</label>
    </li>
</ul>

我需要复选框在<li>的右侧并垂直居中

目前，它的样式为：

li input
   display: inline-block;
   float: right;
   margin-right: 10px;

我已经尝试为vertical-align 使用各种值，但这似乎没有帮助。此外，在某些情况下，标签可能很长并且跨越多行。当 li 的高度是任意的时，复选框仍然需要能够垂直居中。

我该如何实现这一目标？

【问题讨论】：

giveupandusetables.com? 不希望 :) 忘了提到标记是由后端生成的，所以我不能真正在标记中使用表格。 【参考方案1】：

垂直对齐仅适用于内联元素。如果你浮动它，那么我认为它不再被视为该内联元素流的一部分。

使标签成为内联块，并在标签和输入上使用垂直对齐来对齐它们的中间。然后，假设标签和复选框可以有特定宽度，使用相对定位而不是浮动来交换它们（jsFiddle demo）：

input 
    width: 20px;

    position: relative;
    left: 200px;

    vertical-align: middle;


label   
    width: 200px;

    position: relative;
    left: -20px;

    display: inline-block;
    vertical-align: middle;

【讨论】：

非常感谢，对我来说，关键点是“在标签和输入上都使用垂直对齐”，我只在输入上使用它。再次感谢！关键是标签宽度强制换行。如果 ul 宽度强制换行。标签上必须有宽度。【参考方案2】：

这不是一个完美的解决方案，而是一个很好的解决方法。

您需要使用display: table-cell 指定您的元素以充当表格

解决方法：^Demo

html：

<ul>        
    <li>
        <div><input type="checkbox" value="1" name="test[]" id="myid1"></div>
        <div><label for="myid1">label1</label></div>
    </li>
    <li>
        <div><input type="checkbox" value="2" name="test[]" id="myid2"></div>
        <div><label for="myid2">label2</label></div>
    </li>
</ul>

CSS：

li div  display: table-cell; vertical-align: middle;

【讨论】：

【参考方案3】：

我发现最有效的解决方案是用display:flex和align-items:center定义父元素

LIVE DEMO

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .myclass
        display:flex;
        align-items:center;
        background-color:grey;
        color:#fff;
        height:50px;
      
    </style>
  </head>
  <body>
    <div class="myclass">
      <input type="checkbox">
      <label>do you love Ananas?
      </label>
    </div>
  </body>
</html>

输出：

【讨论】：

【参考方案4】：

<div>
    <input type="checkbox">
    <img src="/image.png" />
</div>

input[type="checkbox"]

    margin-top: -50%;
    vertical-align: middle;

【讨论】：

【参考方案5】：

这对我来说很可靠。为效果和清晰度添加了单元格边框和高度：

<table>
  <tr>
    <td style="text-align:right; border: thin solid; height:50px">Some label:</td>
    <td style="border: thin solid;">
      <input type="checkbox" checked="checked" id="chk1" style="cursor:pointer; "><label for="chk1" style="margin-top:auto; margin-left:5px; margin-bottom:auto; cursor:pointer;">Check Me</label>
    </td>
  </tr>
</table>

【讨论】：

我建议分离内联 CSS，否则答案很难理解【参考方案6】：

Add CSS:


li 
  display: table-row;
 
 
li div 
   display: table-cell;
   vertical-align: middle;

  
.check
  width:20px;

  
ul
   list-style: none;

 <ul>
       <li>

           <div><label for="myid1">Subject1</label></div>
            <div class="check"><input type="checkbox" value="1"name="subject" class="subject-list" id="myid1"></div>
       </li>
       <li>

           <div><label for="myid2">Subject2</label></div>
              <div class="check" ><input type="checkbox" value="2"  class="subject-list" name="subjct" id="myid2"></div>
       </li>
   </ul>

【讨论】：

【参考方案7】：

输入块和浮动，调整边距顶部值。

HTML：

<div class="label">
<input type="checkbox" name="test" /> luke..
</div>

CSS：

/*
change margin-top, if your line-height is different.
*/
input[type=checkbox]
height:18px;
width:18px;
padding:0;
margin-top:5px;
display:block;
float:left;

.label
border:1px solid red;

Demo

【讨论】：

以上是关于垂直对齐复选框的主要内容，如果未能解决你的问题，请参考以下文章

垂直对齐复选框与行中的 Bootstrap 3 选项卡

没有标签文本的复选框的引导形式水平垂直对齐

垂直对齐复选框

解决方法：Demo

解决方法：^Demo