Can't get image to be in the middle of a div

I am trying to follow this tutorial for getting an image to be aligned at the center of a div:

http://www.w3.org/Style/Examples/007/center#vertical

and here is the page I am working on:

http://www.comehike.com/hikes/hiking_group.php?hiking_group_id=2

You see how on the right side, the button for "join group" is not centered vertically?

I am doing this css:

width: 280px; 
float: right; 
border: 1px solid; 
margin-bottom: 5px; 
vertical-align: middle;  
display: block; 
display: table-cell;

And I thought the part about vertical-align: middle; would do the tric开发者_运维百科k, but it isn't. Any way I can center the button there vertically?

Thanks!

---

http://www.brunildo.org/test/img_center.html is the best I could find.

---

Would this work?

a.login_link img {
    display: block; 
    margin:auto;
}
a.create_profile_link img {
    display: block; 
    margin:auto;
}