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：
100db36a723c770d327fc0aef2ce13b1
  93f0f5c25f18dab9d176bd4f6de5d30e
    5c9e6b534ba2110e6037f94e6d2b81cb">
    0f3eabac747cdf61a51589c5584ae6e8
    b2386ffb911b14667cb8f0f91ea547a7导航栏6e916e0f7d1e588d4f442bf645aedb2f
    76a789f4c7abb276271f09cb7093b9b0
0a38f0830a55e802afea8a264e09be30
848686bdab73464aa50c38daea1c7ab9
8f690112916dd4fc9859bc569e88b8a7    
1cdae431f80e3621f35ccdc0b59d14f7
1d9f271b9563577ed644df4b3cfafae0
737e97d765d1eaedb33400a9b1f38d73
-->

  9c3bca370b5104690d9ef395f2c5f8d1
  
  b7af89deb9c927895dabadbc8c459b7c
   8a777f29b3008d13e8d37a283132850b
a3d26fddad773596419d66c0738d6f77
     65cf39cf2a37c12d8cbf7e13e4befddd
        29641bca282af28eb484f16c36ddeaa8
            ff6d136ddc5fdfeffaf53ff6ee95f185
             dd30f8e5565638ba3914e0141ea244a7f1b3ba8846c179e65eb68da95b01a812导航栏15db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                058e8cffef777e1aab16dedaa108b0eef1b3ba8846c179e65eb68da95b01a812导航栏15db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                6ca66dd6916cbdd04072bf1c32e42248bed06894275b65c1ab86501b08a632eb
                25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812导航栏15db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
             bd4731e8e378ccd1d52e3eba38a01197f1b3ba8846c179e65eb68da95b01a8125db79b134e9f6b82c0b36e0489ee08ed导航栏1bed06894275b65c1ab86501b08a632eb
             6ca66dd6916cbdd04072bf1c32e42248bed06894275b65c1ab86501b08a632eb
                25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812导航栏15db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                6ca66dd6916cbdd04072bf1c32e42248bed06894275b65c1ab86501b08a632eb
                25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812导航栏15db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            929d1f5ca49e04fdcb27f9465b944689
        16b28748ea4df4d9c2150843fecfba68
        3aace101be7d0a3f21df9f03f040eb19
    16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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

vertical-align:bottom;

.
2. Use

line-height:30px;

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

vertical-align:bottom;

I used

vertical-align: middle;

, 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