mam w linkach ikony i tekst pod nimi chciałbym żeby tekst był ułożony symetrycznie w stosunku do ikony, tzn żeby był równo na środku pod nią.

to linki:

[HTML] pobierz, plaintext 
 
 <ul id="social_box">
                <li><a href=""><img src="<?php echo base_url() ?>application/views/cms/images/meta_tagi.png" alt="meta tagi" /><br/>Edycja Metatagów</a></li>
                <li><a href=""><img src="<?php echo base_url() ?>application/views/cms/images/ustawienia.png" alt="edycja strony" /><br/>Edycja strony</a></li>
                <li><a href=""><img src="<?php echo base_url() ?>application/views/cms/images/uzytkownicy.png" alt="uzytkownicy" /><br/>Użytkownicy i uprawnienia</a></li>
                <li><a href=""><img src="<?php echo base_url() ?>application/views/cms/images/kontakt.png" alt="kontakt" /><br/>Masz pytnie? Napisz.</a></li>
                <li><a href=""><img src="<?php echo base_url() ?>application/views/cms/images/logout.png" alt="wyloguj" /><br/>Wyloguj</a></li>                
            </ul>
[HTML] pobierz, plaintext 

i cały css tyczący się tych elementów:

[HTML] pobierz, plaintext 
#social_box {
    display: block;
    width: 800px;
    height: 48px;
    padding: 15px 0px 25px 100px;
    margin-bottom: 20px;
    border: #8a8980 solid 1px;
}
 
#social_box li {
    display: block;
    float: left;
 
    padding: 0;
    margin: 0;
}
 
#social_box li a {
    width: 48px;
    height: 48px;
    margin-right: 60px;
 
}
[HTML] pobierz, plaintext 

korzystam z gotowego szablonu, w nim były przewidziane tylko ikony.
Proszę o pomoc

[HTML] pobierz, plaintext 
#social_box li {
  display: block;
  float: left;
  border: #fac solid 1px;
  padding: 0;
  margin: 0 10px 0 10px;
  text-align: center;
}
 
#social_box li a {
  width: 48px;
  height: 48px;
  text-align: center;
}
[HTML] pobierz, plaintext 

wielkie dzięki za pomoc ;]