Vertical Align Problem

[cavey5]

I did  a search on vertical-align: middle; and read every post to no avail. In the image below you will see that my icons in front of each name have the text aligned to the bottom of each <div> area. I'd like them centered vertically with the image and have tried everything I can think of. Any ideas?

 

CSS Code:

.subnav4 li a {
background: #222;	
color: #ffffff;
display: block;
padding: 7px 0 1px 8px;
margin: 0 auto;
width: 148px;
height: 35px;
text-decoration: none;	
vertical-align: middle;
}

 

HTML Code:

<div class="subnav4">
  <ul>
  <li><a href="http://crawlmag.com/blogs/alexgauthier/"><img src="blogs/icons/2.png" />  Alex Gauthier</a></li>
  <li><a href="http://www.crawlmag.com/alex"><img src="blogs/icons/2.png" />  Brandon Foster</a></li>
  <li><a href="http://www.crawlmag.com/alex"><img src="blogs/icons/2.png" />  Justin Lucero</a></li>
  <li><a href="http://www.crawlmag.com/alex"><img src="blogs/icons/2.png" />  Tim Piele</a></li>
  <li><a href="http://www.crawlmag.com/alex"><img src="blogs/icons/2.png" />  Tom Clark</a></li>
  </ul> 
</div>

 

Screenshot:

[Daniel0]

Try to apply the vertical-align to the li instead.

[unidox]

I think it would also work like :

 

<div class="subnav4">
  <ul class="subnav4">
  <li><a href="http://crawlmag.com/blogs/alexgauthier/"><img src="blogs/icons/2.png" />  Alex Gauthier</a></li>
  <li><a href="http://www.crawlmag.com/alex"><img src="blogs/icons/2.png" />  Brandon Foster</a></li>
  <li><a href="http://www.crawlmag.com/alex"><img src="blogs/icons/2.png" />  Justin Lucero</a></li>
  <li><a href="http://www.crawlmag.com/alex"><img src="blogs/icons/2.png" />  Tim Piele</a></li>
  <li><a href="http://www.crawlmag.com/alex"><img src="blogs/icons/2.png" />  Tom Clark</a></li>
  </ul> 
</div>

 

or if that doesnt work apply the class to each <li>

 

<li class="subnav4">

[bronzemonkey]

Since you have set a {height:35px} why not try replacing vertical-align with {line-height: 35px}