为中心的CSS DIV，具有中间

http://codepen.io/willc86/pen/hpFLe 为中心的CSS DIV，具有中间

嗨我在上面的代码笔链接，这样你们可以看到它的问题。我很困扰中间盒子的问题。我怎么做。当我不居中，中间的方框似乎有利于一方，当我缩小浏览器的

这是我的代码

#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>

来源

2013-11-20 user3466255

中东块棍棒一方是因为“浮动：左”的规则。为了居中，它不需要浮动。你可以添加'自动'水平边距，没有任何浮动，它会正常工作。

这里被修改例如：http://codepen.io/anon/pen/pitod

（有带的顶部填充父容器，以避免与顶部边缘问题一招，但可以解决，只要你喜欢）

来源

2013-11-20 23:47:30 tunya

希望它会帮助你， #mcolumn现在居中

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

Demo

来源

2013-11-20 23:48:33

为中心的CSS DIV，具有中间

回答

相关问题