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

问题描述

| 我正在尝试在浮动的灰色框中将各种大小的徽标垂直和水平居中，以便当它们彼此并排时，彼此之间的距离相等。有人能帮忙吗？我有水平对齐方式，但垂直对齐方式并非如此简单。

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>

    

解决方法

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

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