垂直对齐复选框

时间:2012-03-22 01:40:34

标签: css checkbox vertical-alignment

我已经查看了有关此问题的不同问题,但由于我的标记限制而无法找到任何可行的内容。

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

<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的高度是任意的时,复选框仍然需要能够垂直居中。

我怎样才能实现这个目标?

7 个答案:

答案 0 :(得分:53)

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

使标签成为内嵌块,并在标签和输入上使用垂直对齐以对齐其中间。然后,假设标签和复选框上有特定宽度是可以的,使用相对定位而不是浮动来交换它们(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;
}

答案 1 :(得分:11)

它不是一个完美的解决方案,但是一个很好的解决方法。

您需要将元素指定为具有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; }

答案 2 :(得分:2)

我发现最有效的解决方案是用import { Component, OnInit, Injectable } from '@angular/core'; import { MemberService } from './member.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) @Injectable() export class AppComponent implements OnInit { got_data: boolean = false; data: string; constructor(private member: MemberService) {} ngOnInit() { this.member.getMemberForm().subscribe((data)=>{ this.data = data; if (this.data.length > 0) this.got_data = true; }); } } display:flex定义父元素

LIVE DEMO

align-items:center

输出:

enter image description here

答案 3 :(得分:0)

<div>
    <input type="checkbox">
    <img src="/image.png" />
</div>
input[type="checkbox"]
{
    margin-top: -50%;
    vertical-align: middle;
}

答案 4 :(得分:0)

这对我可靠。添加了单元格边框和高度以提高效果和清晰度:

<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>

答案 5 :(得分:0)

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>

答案 6 :(得分:-2)

输入阻止和浮动,调整保证金最高值。

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