水平导航栏中链接的CSS / HTML垂直对齐方式

Given the following code:

给出以下代码：

HTML:

<div id="nav_bar">
   <ul>
        <li ><a href="/go.html?url=#" class="current">HOME</a></li>
        <li><a href="/go.html?url=#">GALLERY</a></li>
        <li><a href="/go.html?url=#">TO DRINK</a></li>
        <li><a href="/go.html?url=#">TO EAT</a></li>
        <li><a href="/go.html?url=#">LOCATION</a></li>
        <li><a href="/go.html?url=#">CONTACT</a></li>
        <li><a href="/go.html?url=#"><img class="flag"src="images/italy_flag.png" alt="" /></a></li>
        <li><a href="/go.html?url=#"><img class="flag"src="images/uk_flag.png" alt="" /></a></li>
        <li><a href="/go.html?url=#"><img class="flag"src="images/spain_flag.png" alt="" /></a></li>
        </ul>
</div>

CSS:

 #nav_bar{
 width:745px;
 height:20px;
 background-image:url(../images/bkg_nav_bar_02.png);
 margin:5px auto;
 -moz-border-radius:.3em;
 -webkit-border-radius:.3em;
 }
 #nav_bar ul{
 list-style:none;
 text-align:center;
 }
 #nav_bar a{
 text-decoration:none;
 font-size:.8em;
 margin:0 10px;
 font-weight:bold;
 color:#FFFF33;
 }
 #nav_bar li{
 display:inline;
 margin-bottom:3px;
 }
 .flag{
 position:relative;
 float:right;
 border:none;
 margin-top:4px;
 margin-right:10px;
 }
HTML:

<d