it-swarm.com.de

Ein Kontrollkästchen vertikal ausrichten

Ich habe mir die verschiedenen Fragen zu diesem Problem angesehen, konnte aber aufgrund von Einschränkungen in der Auszeichnung nichts finden, was funktioniert.

Mein Markup sieht so aus (leider, da dies von einem Backend erzeugt wird, kann ich das Markup nicht ändern).

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

Ich brauche das Kontrollkästchen rechts und vertikal im <li> zentriert.

Derzeit ist dies wie folgt gestaltet:

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

Ich habe versucht, verschiedene Werte für vertical-align zu verwenden, aber das scheint nicht zu helfen. In einigen Fällen kann das Etikett auch sehr lang sein und mehrere Zeilen umfassen. Das Kontrollkästchen muss sich weiterhin vertikal zentrieren lassen, wenn die Höhe des Li beliebig ist.

Wie kann ich das erreichen?

40
F21

Die vertikale Ausrichtung funktioniert nur bei Inline-Elementen. Wenn Sie es schweben, glaube ich nicht, dass es als Teil dieses Stroms von Inline-Elementen behandelt wird.

Machen Sie die Beschriftung zu einem Inline-Block und verwenden Sie sowohl auf der Beschriftung als auch auf der Eingabe eine vertikale Ausrichtung, um deren Mitten auszurichten. Wenn Sie jedoch annehmen, dass die Beschriftungen und Kontrollkästchen eine bestimmte Breite haben, verwenden Sie die relative Positionierung anstelle des Gleitens, um sie auszutauschen ( 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; 
}
53
Supr

Es ist keine perfekte Lösung, aber ein guter Workaround. 

Sie müssen Ihre Elemente zuweisen, um sich als Tabelle mit display: table-cell zu verhalten.

Lösung: 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; }
11
Starx
<div>
    <input type="checkbox">
    <img src="/image.png" />
</div>
input[type="checkbox"]
{
    margin-top: -50%;
    vertical-align: middle;
}
0

Das funktioniert zuverlässig für mich. Zellränder und -höhe für mehr Wirkung und Klarheit hinzugefügt:

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