Question

我正试图在浮动的灰色框内垂直和水平地居中各种尺寸的徽标，这样当它们彼此相对时，彼此之间的距离就相等。有人能帮忙吗？我有水平对齐但垂直不是那么简单。

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

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

1 个答案: