怎么控制CSS将文字显示在水平线中间

如何控制CSS将文字显示在水平线中间
如下图所示，spell problem这一条是从框的上面开始的，由于不是在最中间，看着很不舒服。我现在希望让spell problem可以动态的在框的中间线上下均匀分布，不知道应该怎么设置？求指教。
怎么控制CSS将文字显示在水平线中间

我这个是从Jquery UI js上改过来的。供测试代码如下：
测试文件下载：http://bz5811.iteye.com/admin/blogs/1918370包含相应css,js文件

<!doctype html>

<html lang="en">

<head>

	<meta charset="utf-8">

	<title>jQuery UI Selectable - Display as grid</title>

	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">

	<script src="jquery-1.9.1.js"></script>

	<script src="jquery.ui.core.js"></script>

	<script src="jquery.ui.widget.js"></script>

	<script src="jquery.ui.mouse.js"></script>

	<script src="jquery.ui.selectable.js"></script>

	<link rel="stylesheet" href="../demos.css">


	<style>

	#feedback { font-size: 1.4em; }

	#selectable .ui-selecting { background: #FECA40; }

	#selectable .ui-selected { background: #F39814; color: white; }

	#selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }

	#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 2em; text-align: center; }

	</style>

	<script>

	$(function() {

		$( "#selectable" ).selectable();

	});

	</script>

</head>

<body>


<ol id="selectable">

	<li class="ui-state-default">1</li>

	<li class="ui-state-default">2</li>

	<li class="ui-state-default">3</li>

	<li class="ui-state-default">4</li>

	<li class="ui-state-default">5</li>

	<li class="ui-state-default">6</li>

	<li class="ui-state-default">7</li>

	<li class="ui-state-default">8</li>

	<li class="ui-state-default">9</li>

	<li class="ui-state-default">10</li>

	<li class="ui-state-default">11</li>

	<li class="ui-state-default">12</li>

</ol>

</body>

</html>