Вертикальное выравнивание в горизонтальном меню

Подскажите, пожалуйста, как в горизонтальном блочном меню выровнять текст по вертикали.

Вот так оно выглядит в html:

<div id="top_nav">
        <li id="main"></li>
        <li><a href="#">Многобукаф букафмного</a></li>
        <li><a href="#">Тут поменьше</a></li>
        <li><a href="#">Тыщ</a></li>
        <li><a href="#">Ещё немного</a></li>
        <li><a href="#">А вот здесь очень много</a></li>
</div>

А вот такой к нему css:

#top_nav {
	margin: 17px 0 0 2px;
	position: inherit;
	
}

#top_nav li {
	display: inline;
	float: left;
	list-style: none;
	font-family: Tahoma;
	font-size: 16px;
	color: #669933;
	text-align: center;
	font-weight: 900;
}

#top_nav li a {
	display: block;
	width: 150px;
	height: 57px;	
	color: #669933;
	background: url(img/topnav_bg.png);
	text-decoration: none;
}

#top_nav li a:hover,active {
	display: block;
	width: 150px;
	height: 57px;
	color: #669933;
	background: url(img/topnav_bgactive.png);
	text-decoration: none;
}

#main {
	background: url(img/main_active.png);
	width: 51px;
	height: 57px;
}

#main - это отдельно оформленный пункт, соответственно, к нему отдельный id.

Собственно, всё выглядит нормально, за исключением "прилипшего" к верхнему краю блоков текста. Можно сверстать таблицами и задать text-align: middle. Но меню в таблицах никак не катит. :( Думаю, можно через padding попробовать, но как-то не получается. Проблема осложняется тем, что в некоторых пунктах меню букаф многа, и текст - в 2 строки, что, в принципе, и требуется, однако с выравниванием по центру, по вертикали.

ЗЫ. Может, ещё какие-то ошибки есть? Я не шибко матёрый верстальщик. :D