How to center stuff inside link

[hwoarang69]

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.

Html code:

<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>

my CSS code

#table table
{
    color: #4281A4; /*dark blue*/
    font-weight: bold;
    width: 100%;
}

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

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

#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
{

}

[lps]

play with css vertical-align: middle;

[Kelly Burby]

Find the link how to use the vertical-align: middle;.

[diafol]

VA is a git. There have been some pretty cool workarounds. The most recent one I came across is this:

http://codepen.io/webinsation/pen/GCuhm

Which I like a lot.

[lps]

another way around:(using existing code)

<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>

playing with css

td a{
    position: relative;
}
td a *{
    position: absolute;
    top:0;
    bottom:0;
    margin: auto;
}

[diafol]

Most fixes I've seen have an absolute container and then an inner relative element.

[Internetum01]

try to add

#table table {
margin: 0 auto;
}