web-dev-qa-db-ja.com

チェックボックスの垂直方向の整列

この問題に関するさまざまな質問を見てきましたが、マークアップの制限のために機能するものが見つかりませんでした。

私のマークアップはそのように見えます（残念ながら、これはバックエンドによって生成されるため、マークアップを変更することはできません）。

<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の高さが任意の場合、チェックボックスはそれ自体を垂直方向に中央に配置できる必要があります。

どうすればこれを達成できますか？

csscheckboxvertical-alignment
43
F21

垂直方向の配置は、インライン要素でのみ機能します。あなたがそれをフロートする場合、インライン要素のストリームの一部として扱われることはもうないと思います。

ラベルをインラインブロックにし、ラベルと入力の両方で垂直方向の配置を使用して、それらの中央を揃えます。次に、ラベルとチェックボックスに特定の幅を設定してもかまわないと仮定して、フローティングではなく相対配置を使用してそれらを交換します（ 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;
}
56
Supr

それは完璧な解決策ではありませんが、良い回避策です。

display: table-cellでテーブルとして動作するように要素を割り当てる必要があります

解決： デモ

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; }
12
Starx
<div>
    <input type="checkbox">
    <img src="/image.png" />
</div>

input[type="checkbox"]
{
    margin-top: -50%;
    vertical-align: middle;
}
0
Timothy Gonzalez

これは私にとって確実に機能します。効果と明快さのために追加されたセルの境界線と高さ：

<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>
0
retiredcoder
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>
0
Sundaram Seth