title: How to vertical align image inside div
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/7273338/how-to-properly-vertically-align-an-image">How to properly vertically align an image</a>  </p>
  </blockquote>
  
  
  
  <p>Image size changes but the div size is fixed</p>
  
  <p>These are CSS but not working. Is it possible to achieve this without using background feature of CSS.</p>
  
  <p>This is CSS class which image is inserted in.</p>
  
  <pre><code>    .PI
  {
      top: 25px;
      position: absolute;
      width: 239px;
      height: 120px;
      line-height:120px;
      text-align: center;
      left:-2px;
        border-top: 1px solid #f7f7f7;
     background: #b5aeb1;
     background: -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#b5aeb1));
     background: -webkit-linear-gradient(top, #d9d9d9, #b5aeb1);
     background: -moz-linear-gradient(top, #d9d9d9, #b5aeb1);
     background: -ms-linear-gradient(top, #d9d9d9, #b5aeb1);
     background: -o-linear-gradient(top, #d9d9d9, #b5aeb1);
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     border-radius: 8px;
     -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
     -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
     box-shadow: rgba(0,0,0,1) 0 1px 0;
     text-decoration: none;
     vertical-align: middle;  
  }
  
  .PI img
  {
  margin: auto;
  vertical-align: middle;  
  }
  </code></pre>