Hi,
I'm trying to vertically align the navigation text with the navigation icon/image. I've tried different methods and it's just not working out. Here is the css and the html.
<head>
<title>Navigation</title>
<link href='http://fonts.googleapis.com/css?family=Leckerli+One' rel='stylesheet' type='text/css'>
<style type="text/css">
<!--
#navbar ul {
margin: 0;
list-style-type: none;
float: right;
vertical-align: middle;
background-position: center;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #db203b;
cursive;
font-family: "Leckerli One";
}
#navbar ul li a:hover {
color: #db8c50;
background-color: #fff;
}
#nav.textmiddle {vertical-align:text-middle;}
-->
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><a href="#"><img src="images/nav_icn_books.png" width="48" height="48" class="textmiddle">books</a></li>
<li><a href="#"><img src="images/nav_icn_apparel.png" width="48" height="48">apparel</a></li>
<li><a href="#"><img src="images/nav_icn_home_goods.png" width="48" height="48">home goods</a></li>
<li><a href="#"><img src="images/nav_icn_accessories.png" width="48" height="48">accessories</a></li>
</ul>
</div>
</body>
</html>