ul li I am looking for an answer to the problem of horizontal arrangement and vertical centering. Please humbly ask for advice. _html/css_WEB-ITnose

我现在在写一个导航栏，用ul水平平铺，但是现在遇到了一个问题，就是要使我用float:left，那么在浏览器里放大页面会发现导航栏会乱掉，要使用display: inline;和white-space: nowrap;可以实现水平平铺，而且在浏览器中放大页面不会乱，但问题来了，用display: inline;和white-space: nowrap;后，里面的文字无法垂直居中，我是将ul放在一个div里面了，div想要让ul文字和图片在div里面垂直居中，并且横向排列（IE9无法垂直居中，Chrome就可以），这让人很郁闷，而用float:left就可以垂直居中。
现在有没有什么办法，既可以让ul里面的东西水平平铺，垂直居中而且在浏览器里面方法后不乱的。
代码如下：
HTML：

  
    
    
    
    


    




  

  
  
  




CSS:
.container{height: auto;}
/**Top menu**/
.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;} /* Unvisited link */
a:visited {color : #BFBFBF;border: none;} /* Visited links */
a:hover {color: #FFFFFF;border: none;} /* When the mouse is hovering over the link */
a :active {color: #BFBFBF;border: none;} /* Selected link */
.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;}

Reply to discussion (Solution)

1. Adjust the image position with

.
2. Use

to adjust the field position.

Thank you both, I found out that the problem is with the picture. The height of my picture is only 35 pixels.
I adjusted the position of the image, but it didn’t work

I used , but there is another problem. Now I suddenly found that my IE can display the vertical line image, but what about Chrome? Can't it be displayed? Keep asking for advice