CodingForums.com - Vertical Center text in a div

I am trying vertical center my text in a div but it always float at top in div. I also tried using a span inside the div and apply css on span but it too not works. I used this css property (vertical-align:middle)

This is Html

Code:

<div id="topsmallmenucontainer">

<div class="topmenuleft"></div>

<div class="topmenumiddle"><span> Thhis is text inside div</span></div>

<div class="topmenuright"></div>

<div class="clearBox"></div>

</div>

This is CSS

Code:

#topsmallmenucontainer

{

        width:406px;

        height:41px;

        position:absolute;

        top:53px;

        right:30px;

}

.topmenuleft 

{

        width:7px;

        height:41px;

        float:left;

        position:relative;

        background-image: url(../images/top_small_menu_left.png);

        background-repeat: no-repeat;

        background-position: 0 0;

}

.topmenumiddle 

{

        width:393px;

        height:41px;

        position:relative;

        float:left;

        background-image: url(../images/top_small_menu_middle.png);

        background-repeat: repeat-x;

        background-position: 0 0;

        vertical-align:middle;

        color:#FFF;

}



.topmenuright 

{

        width:6px;

        height:41px;

        position:relative;

        float:left;

        background-image: url(../images/top_small_menu_right.png);

        background-repeat: no-repeat;

        background-position: 0 0;

}

.clearBox

{

        clear:both;        

}

This is output div snap
https://www.dropbox.com/s/u3f863jjbw2295r/Capture.JPG