I have looked at the different questions regarding this issue, but couldn't find anything that works due to limitations in my markup.
My markup looks like so (unfortunately as this is generated by some backend, I am unable to change the markup).
<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>
I need the checkbox to be on the right and centered vertically in the <li>
Currently, this is styled as:
li input{
display: inline-block;
float: right;
margin-right: 10px;
}
I have tried using various values for vertical-align, but that doesn't seem to help. Also, in some cases the label can be very long and span multiple lines. The checkbox would still need to be able to vertically center itself when the height of the li is arbitrary.
How can I go about achieving this?
This question is related to
css
checkbox
vertical-alignment
The answer is
The most effective solution that I found is to define the parent element with display:flex and align-items:center
<!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>
OUTPUT:
This works reliably for me. Cell borders and height added for effect and clarity:
<table>_x000D_
<tr>_x000D_
<td style="text-align:right; border: thin solid; height:50px">Some label:</td>_x000D_
<td style="border: thin solid;">_x000D_
<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>_x000D_
</td>_x000D_
</tr>_x000D_
</table>make input to block and float, Adjust margin top value.
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;
}
Its not a perfect solution, but a good workaround.
You need to assign your elements to behave as table with display: table-cell
Solution: 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; }
Add CSS:_x000D_
_x000D_
_x000D_
li {_x000D_
display: table-row;_x000D_
_x000D_
}_x000D_
li div {_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
_x000D_
}_x000D_
.check{_x000D_
width:20px;_x000D_
_x000D_
}_x000D_
ul{_x000D_
list-style: none;_x000D_
}_x000D_
<ul>_x000D_
<li>_x000D_
_x000D_
<div><label for="myid1">Subject1</label></div>_x000D_
<div class="check"><input type="checkbox" value="1"name="subject" class="subject-list" id="myid1"></div>_x000D_
</li>_x000D_
<li>_x000D_
_x000D_
<div><label for="myid2">Subject2</label></div>_x000D_
<div class="check" ><input type="checkbox" value="2" class="subject-list" name="subjct" id="myid2"></div>_x000D_
</li>_x000D_
</ul><div>
<input type="checkbox">
<img src="/image.png" />
</div>
input[type="checkbox"]
{
margin-top: -50%;
vertical-align: middle;
}
Source: Stackoverflow.com