Vertical center of text in a div

[eetec]

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)

HTML

<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>

CSS

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

Output Snapshot:
Click Here

Kindly give me any solution thanks.

[JorgeM]

There are various ways to vertically "center" text. here is an easy way to do it if you just have a single line of text...

<div style="border:1px solid black;width:500px;padding:0px 10px;">
  <p style="line-height:3em;">This text is centered vertically</p>
</div>