How to position the check box inside li element to center?
<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>