HTML align Image

i have create the folowing html

http://ift.tt/29Ot8YJ

How can i change the alignment that the images will place at the bottom of the white area? I tried everything with align-Vertical but this does not work. And i want not change the width of the images that they fit.

This should be the result

but i maneged it with 'margin-top:-4em' and i think this is not the right way because the possition will be changed if the window becomes smaller

This is my Code

HTML

<nav class="nav">
  <ul>
    <li><a href="index.html" class="active"><img src="images/home.png" /></a></li>
    <li><a href="index.html" class="active"><img src="images/auto.png" /></a></li>
    <li><a href="index.html" class="active"><img src="images/bus.png" /></a></li>
    <li><a href="index.html" class="active"><img src="images/bahn.png" /></a></li>
  </ul>
</nav>

CSS

/* Navigation */
nav
{
    display:block;
    height:2.5em;
    background:#ffffff;
    text-align:center;
}

nav ul
{
    display:block;   
}

nav ul li
{
    display:inline;   
    margin:0em 0.188em 0em 0.188em;    
     
}

nav ul li a
{
    color:#454040;
    font-size:1.125em;
    line-height:2.5em;  
    padding:0.563em 0.938em 0.375em 0.983em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
}

nav ul li a img
{        
    width:4%;   
    height:auto;
}

Thanks for Help Greetings Nejox

from Recent Questions - Stack Overflow http://ift.tt/29Ot77b
via https://ifttt.com/ IFTTT