ul li 水平排列不断行和垂直居中问题，求解答，虚心求教。
我现在在写一个导航栏，用ul水平平铺，但是现在遇到了一个问题，就是要使我用float:left，那么在浏览器里放大页面会发现导航栏会乱掉，要使用display: inline;和white-space: nowrap;可以实现水平平铺，而且在浏览器中放大页面不会乱，但问题来了，用display: inline;和white-space: nowrap;后，里面的文字无法垂直居中，我是将ul放在一个div里面了，div想要让ul文字和图片在div里面垂直居中，并且横向排列（IE9无法垂直居中，Chrome就可以），这让人很郁闷，而用float:left就可以垂直居中。
现在有没有什么办法，既可以让ul里面的东西水平平铺，垂直居中而且在浏览器里面方法后不乱的。
代码如下：
HTML：
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body style="margin: 0">
<!--总容器-->
<div class="container">
<!--导航栏开始-->
<div class="nav">
<ul>
<li class="logo"><a href="#">导航栏1</a></li>
<li class=""><a href="#">导航栏1</a></li>
<li class="delimiter"></li>
<li><a href="#">导航栏1</a></li>
<li class="menu_right"><a href="#"></a>导航栏1</li>
<li class="delimiter"></li>
<li><a href="#">导航栏1</a></li>
<li class="delimiter"></li>
<li><a href="#">导航栏1</a></li>
</ul>
</div>
<!--导航栏结束-->
</div>
</body>
</html>
CSS：
.container{height: auto;}
/**顶部菜单**/
.nav{ height:40px;background:url(../images/topbar_bg.gif) repeat-x; margin-top: 0px; padding-top: 0px;line-height: 40px;}
ul{list-style: none; white-space: nowrap;}
ul li{ margin: auto 20px; padding: 0; color: #BFBFBF;display: inline; height: 40px; }
.logo{}
.navleft{}
.navright{margin-right: }
a:link {color: #BFBFBF; text-decoration: none;} /* 未访问的链接 */
a:visited {color: #BFBFBF;border: none;} /* 已访问的链接 */
a:hover {color: #FFFFFF;border: none;} /* 当有鼠标悬停在链接上 */
a:active {color: #BFBFBF;border: none;} /* 被选择的链接 */
.menu_right{margin-left: 80px;}
.menu_left{widows: 1px; height: 40px;}
.delimiter{background:url(../images/delimiter.png); margin: 0px; padding: 0px; width: 2px; height: 35px;}
[解决办法]
图片的默认都是顶部对齐的，你把图片的对其方式改成居中试试
[解决办法]
1、图片位置用
vertical-align:bottom;
line-height:30px;
