title: Center image vertically and to the right in a div
body: <p>I would like to center the image with ID "image" to right and vertically. </p>
  
  <p>With PHP I create my DIVs as follow:</p>
  
  <pre><code>echo 
      "&lt;div class=\"first\"&gt;
      &lt;div id=\"second\"&gt;&lt;label id=\"second_div_label\"&gt;&lt;/label&gt;
      &lt;img id=\"image\" src=\"images/my_image.png\"/&gt;
      &lt;/div&gt;
      &lt;div id=\"third\"&gt;&lt;/div&gt;
      &lt;/div&gt;";
  </code></pre>
  
  <p>My CSS code is</p>
  
  <pre><code>.first {
      display: block;
      width: 50%;
      height: auto;
      margin: 0px auto;
      margin-bottom: 15px;
  }
  
  #second {
      margin-top: 5%;
      background-color: #3f51b5;
      border-radius: 5px;
      font-weight: bold;
      padding: 20px;
  }
  
  #third {
      margin-top: 15px;
      border-radius: 5px;
      padding: 20px;
  }   
  
  #image {
      width: 35px;
      height: 35px;
      float: right;
  }
  </code></pre>
  
  <p>Thanks to <code>float:right</code> the image is to the right of DIV but it isn't vertically center and <code>margin-bottom</code> doesn't work. How can I solve this?</p>