вертикальное выравнивание флажка

<p>я посмотрел на различные вопросы, касающиеся этой проблемы, но не смог найти ничего, что работает из-за ограничений в моей разметке.</p><p>моя разметка выглядит так (к сожалению, поскольку она генерируется каким-то бэкэндом, я не могу изменить разметку).</p><pre><code><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> </code></pre><p>мне нужно, чтобы флажок был справа и центрирован по вертикали в <code><li></code></p><p>в настоящее время это называется:</p><pre><code>li input{ display: inline-block; float: right; margin-right: 10px; } </code></pre><p>я пытался использовать различные значения для <code>vertical-align</code>, но это, похоже, не помогает. кроме того, в некоторых случаях метка может быть очень длинной и занимать несколько строк. флажок все еще должен быть в состоянии вертикально центрировать себя, когда высота li произвольна.</p><p>как я могу добиться этого?</p>

<p>вертикальное выравнивание работает только на встроенных элементах. если вы используете его, то я не думаю, что он больше рассматривается как часть этого потока встроенных элементов.</p><p>сделайте метку встроенным блоком и используйте вертикальное выравнивание на метке и на входе, чтобы выровнять их середины. затем, предполагая, что можно иметь определенную ширину на метках и флажках, используйте взаимное расположение вместо плавающего, чтобы поменять их местами ( <a href="http://jsfiddle.net/cc9cs/2/">jsfiddle demo</a> ):</p><pre><code>input{ width:20px; position:relative; left: 200px; vertical-align:middle; } label{ width:200px; position:relative; left: -20px; display:inline-block; vertical-align:middle; } </code></pre>

<p>это не идеальное решение, но хороший обходной путь. </p><p>вам нужно назначить ваши элементы вести себя как таблица с <code>display: table-cell</code></p><h3>решение: <sup> <a href="http://jsfiddle.net/starx/xawy2/3/">демо</a> </sup></h3><p>html: </p><pre><code><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> </code></pre><p>css: </p><pre><code>li div { display: table-cell; vertical-align: middle; } </code></pre>

<pre class="lang-html prettyprint-override"><code><div> <input type="checkbox"> <img src="/image.png" /> </div> </code></pre><pre class="lang-css prettyprint-override"><code>input[type="checkbox"] { margin-top: -50%; vertical-align: middle; } </code></pre>

<p>это работает надежно для меня. границы и высота ячейки добавлены для эффекта и ясности:</p><pre><code>. . . <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> </code></pre>