Img по вертикали по отношению к ul?

Question

Я хочу вертикально выровнять изображение логотипа в нижней части моего навигационного меню. Я пробовал вертикальное выравнивание: text-bottom, но выравнивание по вертикали не работает для меня, потому что ul не работает, как обычный p-тэг. Кто-нибудь может мне помочь?

 <a href="index.php"> 
      <img id="logo" alt="logo" src="http://dyrholmkantinedrift.dk/img/kantinedrift_logo01.png" height="50"> 
     </a> 
     <ul id="nav"> 
      <li><a href="#" title="Home">Home</a></li> 
      <li><a href="#" title="About">About</a></li> 
      <li><a href="#" title="Services">Services</a></li> 
      <li><a href="#" title="Contact">Contact</a></li> 
      <li><a href="#" title="Pellentesque">Pellentesque</a></li> 
      <li><a href="#" title="Aliquam">Aliquam</a></li> 
      <li><a href="#" title="Morbi">Morbi</a></li> 
     </ul> 

CSS-код:

  header img { 
       float:left; 
       position:absolute; 
      } 

      ul { 
       height:50px; 
       position:relative; 
       } 

      ul li { 
       display:inline-block; 
       bottom:0; 
      } 

Answer 1

Проверить эту скрипку: http://jsfiddle.net/Nh6NZ/

Ключ вам нужно использовать display:inline-block вместо плавающей, если вы хотите, чтобы вертикальное выравнивание тех elements.and также float и position absolute не могут использоваться вместе.