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

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