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

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

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

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

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

Источник

5 ответов

Решение

Вертикальное выравнивание работает только на встроенных элементах. Если вы используете его, то я не думаю, что он больше рассматривается как часть этого потока встроенных элементов.

Сделайте метку встроенным блоком и используйте вертикальное выравнивание на метке и на входе, чтобы выровнять их середины. Затем, предполагая, что можно иметь определенную ширину на метках и флажках, используйте взаимное расположение вместо плавающего, чтобы поменять их местами ( демонстрация jsFiddle):

input{
    width:20px;

    position:relative;
    left: 200px; 

    vertical-align:middle; 
}

label{  
    width:200px;       

    position:relative;
    left: -20px;

    display:inline-block;    
    vertical-align:middle; 
}
Источник

Это не идеальное решение, но хороший обходной путь.

Вы должны назначить свои элементы вести себя как таблица с 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; }
Источник

Наиболее эффективное решение, которое я нашел, это определить родительский элемент с display:flex а также align-items:center

LIVE DEMO

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

ВЫХОД:

Источник 

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>

Источник

Это работает надежно для меня. Границы и высота ячейки добавлены для эффекта и ясности:

.
.
.
<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>
Источник 
<div>
    <input type="checkbox">
    <img src="/image.png" />
</div>

input[type="checkbox"]
{
    margin-top: -50%;
    vertical-align: middle;
}
Источник

Сделать ввод, чтобы блокировать и плавать, настроить верхнее значение поля.

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

демонстрация

Источник
Другие вопросы по тегам