title: Vertical align div inside div is not working - CSS
body: <p>JS fiddle : <a href="http://jsfiddle.net/Rkh8L/" rel="nofollow">http://jsfiddle.net/Rkh8L/</a></p>
  
  <p>I am trying to vertically middle div inside div. The class i want to be vertically middles is MonsterImage.</p>
  
  <p>Here the whole code</p>
  
  <pre><code>            &lt;div style="float: left; text-align: center; vertical-align: middle; margin:10px;"&gt;
  
                  &lt;asp:RadioButton  ID="RdButtonMonsterImages" ClientIDMode="Static" runat="server" /&gt;
  
                  &lt;div class="permonster" &gt;
                      &lt;div class="MonsterImage"&gt;&lt;/div&gt;            
                  &lt;/div&gt;
          &lt;/div&gt;
  
  
  
              .permonster
          {
              width: 130px;
              height: 120px;
              text-align: center;
              vertical-align: middle;
              border-top: 1px solid #f7fcff;
              background: #ababab;
              background: -webkit-gradient(linear, left top, left bottom, from(#e3e6e8), to(#ababab));
              background: -webkit-linear-gradient(top, #e3e6e8, #ababab);
              background: -moz-linear-gradient(top, #e3e6e8, #ababab);
              background: -ms-linear-gradient(top, #e3e6e8, #ababab);
              background: -o-linear-gradient(top, #e3e6e8, #ababab);
              -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;
              padding:2px;
          }
  
  
              .MonsterImage
              { 
  border-width: 0px; border-style: none; 
  background-image: url(http://static.monstermmorpg.com/images/csssprites/RegisterCSS.png); 
  background-color: transparent; 
  margin:auto; 
  background-repeat: no-repeat; 
  background-position: -0px -120px;  
  width: 130px; 
  height: 96px;   
              }
  </code></pre>