Я рассмотрел различные вопросы, касающиеся этой проблемы, но не смог найти ничего, что работает из-за ограничений в моей разметке.
Моя разметка выглядит так (к сожалению, поскольку это генерируется некоторыми бэкэнд, я не могу изменить разметку).
<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 произвольна.
Как я могу добиться этого?