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

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

This is 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;	
}

This is output div snap