it-swarm.com.ru

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

Я посмотрел на различные вопросы, касающиеся этой проблемы, но не смог найти ничего, что работает из-за ограничений в моей разметке.

Моя разметка выглядит так (к сожалению, поскольку она генерируется каким-то бэкэндом, я не могу изменить разметку).

<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 произвольна.

Как я могу добиться этого?

40
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; 
}
53
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; }
11
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