Question

JS fiddle : http://jsfiddle.net/Rkh8L/

I am trying to vertically middle div inside div. The class i want to be vertically middles is MonsterImage.

Here the whole code

            <div style="float: left; text-align: center; vertical-align: middle; margin:10px;">

                <asp:RadioButton  ID="RdButtonMonsterImages" ClientIDMode="Static" runat="server" />

                <div class="permonster" >
                    <div class="MonsterImage"></div>            
                </div>
        </div>



            .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;   
            }

Answer 1

You can’t vertical-align that element, just add some margin to the top of your .MonsterImage class, something like margin-top:13px; should do it.