title: How to position the check box inside li element to center?
body: <p>I have a list of items with a <code>div</code> content and a span with check box. I want to position my check box span to center of <code>li</code> element.</p>
  
  <pre><code>&lt;li class="e-list e-state-default e-list-check"&gt;
      &lt;div class="cont-bg"&gt;
         content here varies
       &lt;/div&gt;
   &lt;span &gt;
   &lt;input class="e-lv-check e-checkbox e-js e-input" type="checkbox"/&gt;
    &lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Content is loaded dynamically so its height and width varies. I couldn't set padding for positioning. Tried on positioning using vertical-align as well. Nothing worked.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.e-list.e-state-default {
    background-color: #fff;
    border-color: #c8c8c8;
  }
  .e-list {
    border-bottom: 1px solid #c8c8c8;
    font-size: 12px;
  }
  .cont-bg {
    font-size: 17px;
    height: 100px;
    padding-left: 5px;
    padding-top: 10px;
    width: 80%;
    display: inline-block;
  }
  .e-list .e-lv-checkdiv {
    float: right;
  }
  .e-list {
    border-bottom: 1px solid #c8c8c8;
    font-size: 12px;
  }
  .e-list {
    line-height: normal;
    padding: 0 15px;
    cursor: pointer;
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  
    &lt;li class="e-list e-state-default e-list-check"&gt;
      &lt;div class="cont-bg"&gt;
        &lt;div class="brooke"&gt;
        &lt;/div&gt;
        &lt;div class="listrightdiv"&gt;
          &lt;span class="templatetext"&gt;Brooke&lt;/span&gt;  &lt;span class="designationstyle"&gt;HR Assistant&lt;/span&gt;
          &lt;div class="aboutstyle"&gt;
            Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office.
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;span&gt;&lt;input class="e-lv-check e-checkbox e-js e-input" type="checkbox" tabindex="" name="null" value="true" /&gt; &lt;/span&gt;
    &lt;/li&gt;
    &lt;li class="e-list e-state-default e-list-check"&gt;
      &lt;div class="cont-bg"&gt;
        &lt;div class="brooke"&gt;
        &lt;/div&gt;
        &lt;div class="listrightdiv"&gt;
          &lt;span class="templatetext"&gt;Brooke&lt;/span&gt;  &lt;span class="designationstyle"&gt;HR Assistant&lt;/span&gt;
          &lt;div class="aboutstyle"&gt;
            Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office.
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;span&gt;&lt;input class="e-lv-check e-checkbox e-js e-input" type="checkbox" tabindex="" name="null" value="true" /&gt; &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can any one help me?</p>