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

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