Link on the center but icon on the right - html

Question

I have a problem with position. I want to make the icons on the right align while links are on the center of navigation. But seems like I hit a wall.
This is my HTML
<div id="nav">
<ul>
<li> HOME
</li>
<li> ABOUT
</li>
<li> MUSIC
</li>
<li> GALLERY
</li>
<li> CONTACT
</li>
<li class="navimage"> <img src="abc.jpg" />
</li>
<li class="navimage"> <img src="abc.jpg" />
</li>
<li class="navimage"> <img src="abc.jpg" />
</li>
<li class="navimage"> <img src="abc.jpg" />
</li>
</ul>
</div>
and this is my CSS
#nav {
border-bottom:2px solid #FFF;
margin-bottom:20px;
padding:0;
text-align:center;
}
#nav li {
display:inline;
}
#nav a {
display:inline-block;
padding:10px;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
#nav a:hover {
color:#DEB887;
}
.navimage img {
width:30px;
height:30px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
}
.navimage img a {
text-align:right;
}
here is the jsfiddle to check.
http://jsfiddle.net/zN92c/

Answer 1

Replace:
.navimage img a {
text-align:right;
}
With:
.navimage {
float:right;
}

Answer 2

According to your css
.navimage img a
is being aligned right. But the list item itself has no position, Try floating it to the right using:
.navimage { float: right; }
That would alight the list item to the right.