<li>横排展示内容垂直居中 _Web前端

<li>横排显示内容垂直居中
做一个功能是多个<li>横排显示，<li>里面是<span>

li里面有一行的有多行的，做好以后一看，缺了很多东西

不明就里，写了个html试一试是哪里的问题

原本的li的css是

	li {
		float : left;
		height : 50px;
		line-height : 50px;
		margin : 0 5px;
	}

我在写html测试时，height和line-height都没有加，结果没有问题

后来把原来的css复制下来又加了border，出来的结果是：

<html>
<head>
<title></title>
<style style="text/javascript">
	li {
		float : left;
		border : 1px solid #000;
		height : 50px;
                line-height : 50px;
		margin : 0 5px;
	}
</style>
</script>
</head>
<body>
	<ul>
		<li>
			<span>li1</span>
		</li>
		<li>
			<span>li2 line1</span><br/>
			<span>li2 line2</span>
		</li>
		<li>
			<span>li3</span>
		</li>
	</ul>
</body>
</html>

才明白是这样子啊，把line-height去掉就好了，但是我需要垂直居中，没办法，只能大概设置padding来实现了