how to center stuff inside a link?

[gamer2d]

Take a look at the attached image to see what I am trying to do. There will be two images. Images1 is what I want. Image 2 is what my code does.

The issue is the stuff inside link are not center.

<div id="table">
    <table>
        <tr bgcolor="#FFFFFF">
            <td>
                <a href="google.com">
                    <img src="Images/google.png"  />
                    <span>google</span>
                </a>
            </td>
        </tr>
    </table>
</div>

#table table
{
    color: blue;
    font-weight: bold;
    width: 100%;
}

#table table tr td
{
   border: 1px solid black;
   text-align: center;
   height: 100px;
}

#table table tr td:hover
{
    background-color: red;
}

#table table tr td img
{
    width: 50px;
    height: 50px;
    float: left;
    padding-left:15px;

}

#table table tr td a
{
    display: block;
    height: 100%;
}


#table table tr td a span
{

}

[computerfox]

Normally when using a table, you can center-align by using

vertical-align:center

and

*vertical-align:center;

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp