爲中心的CSS DIV，具有中間

Question

http://codepen.io/willc86/pen/hpFLe

嗨我在上面的代碼筆鏈接，這樣你們可以看到它的問題。我很困擾中間盒子的問題。我怎麼做。當我不居中，中間的方框似乎有利於一方，當我縮小瀏覽器的

這是我的代碼

#box{ 
    border: 3px solid red; 

} 

#space{ 
    text-align: center; 

} 
#leftcolumn { 
    width: 300px; border: 1px solid red; float: left; margin: 40px; 
    margin-right: 20px; 

} 
#rightcolumn { 
    width: 300px; border: 1px solid red; float: right; 
    margin: 40px; margin-left: 20px; 

} 
#mcolumn { 
    width: 300px; border: 1px solid red; float: left; margin: 40px; 

} 
.clear { 
    clear: both; 
} 

和我的HTML

<div id="box"> 
     <div id="space">  
      <div id="leftcolumn"><p>LEFT</p></div> 
      <div id="rightcolumn"><p>RIGHT</p></div> 
      <div id="mcolumn"><p>mcolomn</p></div> 
      <div class="clear"></div>   
     </div> 
    </div> 

Answer 1

中東塊棍棒一方是因爲「浮動：左」的規則。爲了居中，它不需要浮動。你可以添加'自動'水平邊距，沒有任何浮動，它會正常工作。

這裏被修改例如：http://codepen.io/anon/pen/pitod

（有帶的頂部填充父容器，以避免與頂部邊緣問題一招，但可以解決，只要你喜歡）

Answer 2

希望它會幫助你， #mcolumn現在居中

#mcolumn { 
width: 300px; 
border: 1px solid red; 
margin: 40px auto; 
display: inline-block; 
} 

Demo