title: Positioning div inside another div
body: <p>I am creating login form for my website but the layout should match to standard image. I'm developing a copy for that image. I have a div (<code>position: absolute</code>) which is main panel and I have some div tags inside of it. I want to position the "Keep me logged in" text correctly according to the following image. That text should be vertically aligned middle to the checkbox. This is my layout:</p>
  
  <p><a href="http://jsfiddle.net/nisa_sala/uA99f/" rel="nofollow noreferrer">http://jsfiddle.net/nisa_sala/uA99f/</a>  </p>
  
  <p><em>This is my target layout:</em></p>
  
  <p><img src="https://i.stack.imgur.com/qIb8G.jpg" alt="text is vertically middle of the checkbox"></p>
  
  <p><em>This is my failed layout:</em></p>
  
  <p><img src="https://i.stack.imgur.com/a6RTR.jpg" alt="this is my failed layout // vertically bottom relative to checkbox"></p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;div id="apDiv27"&gt;
      &lt;div class="bot_con" id="bc1"&gt;&lt;label id="lab_1"&gt;Email or Phone:&lt;/label&gt;
        &lt;input type="text" name="textfield4" id="textfield4" /&gt;
  &lt;/div&gt;
      &lt;div class="bot_con" id="bc2"&gt;&lt;label id="lab_2"&gt;Password:&lt;/label&gt;
        &lt;input type="text" name="textfield5" id="textfield5" /&gt;
      &lt;/div&gt;
      &lt;div class="bot_con" id="bc3"&gt;
  
          &lt;input type="checkbox" name="checkbox2" id="checkbox2" /&gt;
        &lt;label id="lab_3"&gt;Keep me logged in  &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="bot_con" id="bc4"&gt;&lt;a href="http://people-analize.herokuapp.com" target="_blank" tabindex="-1"&gt;Forgot your password?&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I uploaded my 2 images. How can I position this text vertically middle relative to check box ?</p>