Centering Horizontally and Vertically an image inside a box

I'm trying to vertically and horizontally center logos of various sizes within a floated grey box so that when they are 开发者_如何学编程along side of one another they'll have equal distance between each other. Can anyone help with this? I have the horizontal alignment but the vertical is not so simple.

section#content {
overflow: hidden;
clear: both;
}

#content .thumbnail {
width: 240px;
height: 200px;
float: left;
margin: 0px 0px 11px 11px;
background: #ccc;
}

#content .thumbnail a {
display: block;
text-align: center;     
}

    <section id="content">
        <div class="thumbnail">
            <a href="#"><img src="_images/danny_logo.png" alt="danny logo" /></a>           
        </div>
        <div class="thumbnail">
            <a href="#"><img src="_images/tom_logo.png" alt="tom logo" /></a>           
        </div>
        <div class="thumbnail">
            <a href="#"><img src="_images/cliff_logo.png" alt="cliff logo" /></a>
        </div>          
    </section>

I tested this and it may be what you are looking for.

section#content {
    overflow: hidden;
    clear: both;

    #set spacing between child elements
    border-spacing: 11px;
}   

#content .thumbnail {
    width: 240px;
    height: 200px;
    # moved margin properties to enclosing block
    # float: left;
    # margin: 0px 0px 11px 11px;
    background: #ccc;

    # change display type to a table cell and set the vertical-align property
    display:table-cell;
    vertical-align: middle;
}   

#content .thumbnail a { 
    display: block;
    text-align: center;    
}