位置中心左側浮動，但不居中，如何？

Question

我想集中幾塊，一排三排，另一排三排。這是我的HTML和CSS。此刻，它並不連續。看看我的jsfiddle https://jsfiddle.net/fop5q28x/4/

<div id="engagement"> 
    <img src="img/engagement.jpg" alt="engagament" /> 
    <h2>Engagement</h2> 
    <p>Content automatisch doorplaatsen</br> 
     naar uw Youtube, Facebook of </br> 
     twitter kanaal</p> 
    </div> 

    <div id="conversie"> 
     <img src="img/conversie.jpg" alt="conversie" /> 
     <h2>Conversie</h2> 
     <p>Van kijkers naar lid, klant koper of</br> 
      actieve deelnemer. Juist niet alleen</br> 
      voor grote organisaties</p> 
    </div> 

    <div id="elearning"> 
     <img src="img/elearning.jpg" alt="elearning"/> 
     <h2>E-learning</h2> 
     <p>Online Video is een van de snelst</br> 
      groeiende onderwijsmethode aan</br> 
      het worden</p> 
    </div> 




    <div id="klanttevreden"> 
     <img src="img/klanttevreden.jpg" alt="klanttevredenheid" /> 
     <h2>Klanttevredenheid & Call-reductie</h2> 
     <p>Doordat klanten online goed worden</br> 
      geholpen hoeven zij niet meer</br> 
      te bellen of e-mailen</p> 
     </div> 

     <div id="communicatie"> 
     <img src="img/communicatie.jpg" at="communicatie" /> 
     <h2>Corperate Communicatie</h2> 
     <p>Cras justo odio, daboitus ac facicilis in,</br> 
      egestas eget quam. Vestibulumporta </br>felis euismod semper</p> 
     </div> 

     <div id="advertentie"> 
     <img src="img/advertentie.jpg" alt="advertentie" /> 
     <h2>Advertientie Omzetverhoging</h2> 
     <p>Cras justo odio, daboitus ac facicilis in,</br> 
      egestas eget quam. Vestibulumporta </br>felis euismod semper</p> 
    </div> 

    </div> 

Answer 1

#klanttevreden不浮動，因爲你必須在你的CSS語法錯誤。

#klanttevreden,{ 
    float: left; 
    width: 33.3333333%; 

} 

請注意逗號。

Fiddle courtesy of Suresh Ponnukalai。

Answer 2

只需使用display：inline-block的而不是浮動：左，選中更新fiddle

div { 
    width: 33.3333333%; 
    display: inline-block; 
    vertical-align: top; 
}