html - 水平和垂直居中框内的图像

Question

我正在尝试将各种尺寸的 Logo 在 float 的灰色框中垂直和水平居中，这样当它们并排放置时，彼此之间的距离相等。有人能帮忙吗？我有水平对齐，但垂直对齐不是那么简单。

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>

Answer 1

我对此进行了测试，它可能就是您要找的。

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