ul li 水平方向の配置と垂直方向のセンタリングの問題に対する答えを探しています。ぜひアドバイスをお願いします。 _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;}
/**トップメニュー**/
.nav{ height:40px;background:url(../画像/topbar_bg.gif) 繰り返し-x; マージン-トップ: 0px; 行の高さ: 40px;}
ul{リストスタイル: なし; ul li{ : 自動 20 ピクセル; カラー: #BFBFBF; 表示: インライン;
.navleft{}
.navright{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; 高さ: 40px;}
.delimiter{background:url(../images/delimiter.png); 余白: 0px; 幅: 2px;


ディスカッションに返信(解決策)

1.

vertical-align:bottom;

を使用して画像の位置を調整します。
2.
rrree
を使用してフィールドの位置を調整します。

お二人ともありがとうございます。写真に問題があることがわかりました。私の写真の高さはわずか 35 ピクセルです。
画像の位置を調整しましたが、うまくいきませんでした

line-height:30px;

vertical-align:bottom;

を使用しましたが、別の問題が突然発生しました。IEでは縦線の画像が表示できるのに、Chromeでは表示できないのはなぜですか?引き続きアドバイスをお願いします